前端笔记：vue+element-UI实现el-table双击编辑单元格

各种方法汇总：

1、el-table的cell-dblclick双击事件。

2、

 

思路：

给el-table中需要可编辑的每一个单元格内容增加各自对应的标志位flag，通过变flag的值为true或false，判断显示input内容或文字内容。

 

知识点：

1、el-table双击编辑单元格。

2、el-input的autofocus，并且解决只有第一次触发的问题。

3、el-input回车操作enter与失焦事件blur冲突（会触发两次导致操作异常）。

4、如果是组件间操作，tableData是从父组件通过props接过来的，在本子页面中定义了另一个空数组赋值过来，需要增加this.tableData = [...this.tableData]操作。

5、JS通过window对象才能调用vue的this对象。

 

详解：

1、通过js中的props从父组件接收表格内容（单页操作此步省略）

props:{
    tab2list:Array,
},

2、通过js中的data定义一个空数组，页面绑定这个空数组，赋值表格内容（也可以直接绑定tab2list，那就省略这一步，后面所有的tableData替换为tab2list即可）

data() {
    return {
        tableData:[],//用来展示
    };
},

3、template部分