ElementUI table表格组件实现双击编辑单元格

正常状态

编辑状态

代码

<template>
  <div>
    <el-table :data="tableData" border @cell-dblclick="editCell" @cell-click="cellClick">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <div v-if="row===scope.row.id && col===scope.column.id">
            <el-input placeholder="placeholder" v-model="scope.row.name"
                      @blur="updateData"
            ></el-input>
          </div>
          <div v-else>
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      row: "",
      col: "",
      tmpRow: "",
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    editCell: function (row, column) {
      this.row = row.id;
      this.col = column.id;
      this.tmpRow = row;
      this.tmpRow.id = row.id;
    },
    updateData() {
      console.log(this.tmpRow.id);
      console.log(this.tmpRow.address);
      console.log(this.tmpRow.date);
      console.log(this.tmpRow.name);
    },
    cellClick() {
      // this.row = -1;
    }
  }
}
</script>

<style>

</style>