双击table表格进行输入框表格编辑

== @cell-dblclick=“tableEdit”==

<el-table
:data="tableData"
height="95%"
border
@cell-dblclick="tableEdit"
@click="clickTd"
:highlight-current-row="false"
style="width: 100%;margin: auto;background:#334D66;"
:header-cell-style="{color: '#C8D6F1', fontSize: '18px', height:'64px',
background: '#3F607F'}"
>
<el-table-column align="center" prop="evaluateContent" label="目标">
</el-table-column>
<el-table-column align="center" label="完成标志">
<template slot-scope="scope">
{{ scope.row.comment }}
</template>
</el-table-column>
<.table>

js

tableEdit(row, column, cell, event) {
console.log(row, column, cell, event)
if (column.label) {
var beforeVal = event.target.textContent;
event.target.innerHTML = "";
let str = `<div class='cell'>
<div class='el-input'>
<input type='text' placeholder='请输入内容' oninput = "value=value.replace(/[^\d]/g,'')" class='el-input__inner'>
</div>
</div>`;
cell.innerHTML = str;
// 获取双击后生成的input
根据层级嵌套会有所变化
let cellInput = cell.children[0].children[0].children[0];
cellInput.value = beforeVal;
cellInput.focus(); // input自动聚焦
// 失去焦点后
将input移除
cellInput.onblur = function() {
let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
cell.innerHTML = onblurCont; // 换成原有的显示内容
// 调用axios接口
};
}
},

最后

以上就是受伤雪糕为你收集整理的双击table表格进行输入框表格编辑的全部内容，希望文章能够帮你解决双击table表格进行输入框表格编辑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。