Element-UI实现可编辑的表格_element ui可编辑表格

一、效果图

二、描述

有时候根据业务需求，需要对数据进行编辑保存，这时候有三种实现方式，分别是点击按钮弹出弹窗修改，双击弹出弹窗修改，以及直接在表格中点击进行修改等，本文讲述的就是最后一种。

功能描述：我们点击表格任意想要修改的表格单元格，可以显示一个文本框进行修改，当我们失去焦点或者内容发生改变的时候，执行修改或保存，然后隐藏文本框，完成修改保存。

三、代码案例

<el-table
          :data="powerMessageTableAll"
          border"
          @cell-click="cellclick"//单击某个单元格执行
        >
<el-table-column label="施工图及预算批复时间" width="160" align="center">
        <template slot-scope="scope">
          <el-date-picker
            v-if="scope.row.isOK"
            ref="gain"
            v-model="scope.row.sgtBudgetReplyTime"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 100%;hight:100%"
            @blur="handleEdit(scope)"//失去焦点隐藏文本框
            @change="changeData(scope)"//内容改变调用修改方法
          />
          <span v-else>{{ scope.row.sgtBudgetReplyTime }}</span>
        </template>
      </el-table-column>
      </el-table>

methods: {
	handleCurrentChange(row, event, column) {//显示文本框
      if (event.label === '施工图及预算批复时间') {
        this.$set(row, 'isOK', true)
      } else if (event.label === '第一批储备物资到货时间') {
        this.$set(row, 'isOK2', true)
      } else{
        return false
      }
      this.$nextTick(() => {
        this.$refs.gain.focus()//显示文本框并获取焦点
      })
    }，
    handleEdit({ row, column }) {//隐藏文本框
      if (column.label === '施工图及预算批复时间') {
        this.$set(row, 'isOK', false)
      } else if (column.label === '第一批储备物资到货时间') {
        this.$set(row, 'isOK2', false)
      } 
    },
    changeData({ row }) {//该方法调用修改的接口进行修改
    },

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

备注：如果获取焦点事件没有生效，请检查表格字段中有没有fixed这个属性，有的话删除即可
至此完毕！