【技巧】实现饿了么Element UI的table单击（点击）编辑单元格内容

<template>
  <el-table
    @cell-click="tableCellClick"
    :cell-class-name="
      ({ row, column, rowIndex, columnIndex }) => (
        (row.index = rowIndex), (column.index = columnIndex)
      )
    "
    :data="tableData"
  >
    <!-- 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ -->
    <el-table-column label="labelName" align="center" show-overflow-tooltip>
      <template slot-scope="scope">
        <span
          v-if="
            scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex
          "
        >
          <el-input
            placeholder="请输入内容…"
            v-model="scope.row.labelName"
            @blur="tableCellInputBlur"
            size="mini"
            autofocus
          />
        </span>
        <span v-else>{{ scope.row.labelName }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      // 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
      tableCellClickRowIndex: null, // 点击的单元格行索引
      tableCellClickColumnIndex: null, // 点击的单元格列索引
      tableData: [
        {
          labelName: "可以编辑的文本内容1",
        },
        {
          labelName: "可以编辑的文本内容2",
        },
        {
          labelName: "可以编辑的文本内容3",
        },
      ],
    };
  },
  methods: {
    // 点击表格可以编辑■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
    tableCellClick(row, column, cell, event) {
      this.tableCellClickRowIndex = row.index;
      this.tableCellClickColumnIndex = column.index;
    },
    // 单元格失去焦点
    tableCellInputBlur(row, event, column) {
      this.tableCellClickRowIndex = null;
      this.tableCellClickColumnIndex = null;
    },
  },
};
</script>