Blog: 用element-ui表格实现可在表格内编辑，修改数据

实现效果如下：



更改完数据也改变了

<template>
  <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template slot-scope="scope">
        <div v-if="!scope.row.isEdit">{{ scope.row.date }}</div>
        <div v-else>
          <el-input v-model="scope.row.date"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <div v-if="!scope.row.isEdit">{{ scope.row.name }}</div>
        <div v-else>
          <el-input v-model="scope.row.name"></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
    <el-table-column label="按钮">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)">{{ scope.row.isEdit ? '完成' : '编辑' }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleClick(row) {
        // 动态设置数据并通过这个数据判断显示方式
        if (row.isEdit) {
          // 2022.8.31 更新
          // 其实我们想要取消编辑状态的话不需要用下面这步
          // 直接使用 row.isEdit = false 就行
          // 因为 this.$set 后 isEdit 字段已经被 Vue 加上了响应式
          this.$delete(row, 'isEdit')
        } else {
          this.$set(row, 'isEdit', true);
        }
        console.log(this.tableData)
      },
      handle(row, column, cell, event) {}
    }
  }
</script>

<style scoped>
  >>>.el-input {
    width: 100%;
  }
</style>

如果觉得有帮忙你的话请点个赞，谢谢