各种方法汇总:

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部分

 

Logo

前往低代码交流专区

更多推荐