让前端飞Web前端之路

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

2019-03-04  本文已影响0人  kentlin

实现原理就是监听双击事件把对应格的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)
          ··········
    },
上一篇下一篇

猜你喜欢

热点阅读