在element的表格上点击对应格变为input进行编辑

实现原理就是监听双击事件把对应格的span改成input就行,失去焦点保存。

一、在须要编辑的列上添加两种标签

这里使用的是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>
复制代码

二、在表格上注册双击事件

<el-table :data="data" border  @cell-dblclick="rowDblclick">
       ·····
</el-table>
复制代码

三、更改对应格子的isEdit（注意这里要使用set方法更新数组才能出发数组的更新不然没有效果）

在method中的代码

rowDblclick(row, column, cell, event) {
      //判断是不是须要编辑的列 再改变对应的值
      if(column.label == '实际投入人数') {
        /*第一个参数是你要改变的数组， 
          第二个参数是你要改变数组中对应值的索引，
          第三个参数是你要将这个值改为什么*/
        this.$set(this.isEdit, row.index, true)
      }
    }
复制代码

四、保存方法

saveEdit(row) {
        this.$set(this.isEdit, row.index, false)
          ··········
    },
复制代码