<el-table
:data="tableList"
@cell-dblclick="tableEdit"
>
<el-table-column label="列1" align="center">
<template slot-scope="scope">{{ scope.row.type }}</template>
</el-table-column>
<el-table-column label="列2" align="center">
<template slot-scope="scope">{{ scope.row.frameNumber }}</template>
</el-table-column>
</el-table>
这里就比较简单的创建一个表格,拥有两个列,这里注意一定要给表格绑定双击事件属性,不然监听不到双击事件。
//@cell-dblclick有四个默认的返回参数,具体包括什么这里可以自己打印一下看看。
tableEdit(row, column, cell, event) {
//如果这里只想编辑某一列或几列判断一下就行:column.label === '列1'
if (column.label) {
//取出单元格的值
var beforeVal = event.target.textContent;
//置空单元格容器内元素
event.target.innerHTML = "";
//替换成el-input
let str = `<div class='cell'>
<div class='el-input'>
<input type='text' placeholder='请输入内容' 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接口
};
}
}
https://blog.csdn.net/whicce/article/details/112670942