elementui的表格，单元格变成可编辑的

<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName"
      @cell-click="handleCellClick"
    >
      <el-table-column prop="date" label="日期" width="180" align="center">
        <template slot-scope="scope">
          <el-input
            size="small"
            ref="sortNumRef"
            @blur="inputBlur"
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
            v-model="scope.row.date"
          ></el-input>
          <span v-else>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
        <template slot-scope="scope">
          <el-input
            size="small"
            ref="sortNumRef"
            @blur="inputBlur"
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
            v-model="scope.row.name"
          ></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
        <template slot-scope="scope">
          <el-input
            size="small"
            ref="sortNumRef"
            @blur="inputBlur"
            v-if="
              scope.row.index === rowIndex && scope.column.index === columnIndex
            "
            v-model="scope.row.address"
          ></el-input>
          <span v-else>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    //把每一行的索引加到行数据中
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //把每一列的索引加到列数据中
    tableCellClassName({ column, columnIndex }) {
      column.index = columnIndex;
    },
    handleCellClick(row, column, cell, event) {
    //   console.log(row.index, "行索引", column.index, "列索引");
      this.rowIndex = row.index;
      this.columnIndex = column.index;
      this.$nextTick(() => {
        this.$refs.sortNumRef.focus();
      });
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.rowIndex = -1;
      this.columnIndex = -1;
    },
    handleSubmit() {
        console.log(this.tableData);
    },
  },
};
</script>