实现原理就是监听双击事件把对应格的span改为input就行,失去焦点保存。
1、在需要编辑的列上添加两种标签
这里使用的是isEdit数组,对应储存这一列每个格的编辑状态
<el-table-column header-align='center' label="实际投入人数" width="140">
<template slot-scope="{row}">
<span v-if="!isEdit[row.index]">{{row.biz_real_person_count}}</span>
<el-input v-if="isEdit[row.index]" @blur="saveEdit(row)" v-model="row.biz_real_person_count" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
2、在表格上注册双击事件
<el-table :data="data" border @cell-dblclick="rowDblclick">
·····
</el-table>
3、更改对应格子的isEdit(注意这里要使用set方法更新数组才能出发数组的更新否则没有效果)
在method中的代码
rowDblclick(row, column, cell, event) {
//判断是否是需要编辑的列 再改变对应的值
if(column.label == '实际投入人数') {
/*第一个参数是你要改变的数组,
第二个参数是你要改变数组中对应值的索引,
第三个参数是你要将这个值改成什么*/
this.$set(this.isEdit, row.index, true)
}
}
4、保存方法
saveEdit(row) {
this.$set(this.isEdit, row.index, false)
··········
},