elementui中表格嵌套了input框，数据量很大的情况下，输入框输入会卡顿

elementui中的表格嵌套了太多的input框就会卡顿，导致性能下降；
所以首次渲染可以全部渲染span，当点击某个span的时候再变成input框，这样可以提高一些性能；
设置两个事件：
row-class-name: 点击行的时候触发，可以拿到row和rowIndex，可以把当前行的索引设置给行的对象数据中；
@cell-click: 点击某个单元格时触发；
先定义两个变量：
clickCellIndex: 记录被点击的是哪一行
clickCellLabel: 记录被点击的是哪一列
然后input框中判断：scope.row.index === clickCellIndex && scope.column.label == clickCellLabel来决定是否渲染；
完整代码：

<template>
  <div>
    <el-button type="primary" @click="add">增行2000</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="500"
      border
      @cell-click="handleRowClick"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="日期">
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.index === clickCellIndex &&
              scope.column.label == clickCellLabel
            "
            v-model="scope.row.date"
            placeholder="请输入内容"
            @blur="inputBlur(scope.row)"
          ></el-input>
          <span v-else>111</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.index === clickCellIndex &&
              scope.column.label == clickCellLabel
            "
            v-model="scope.row.name"
            placeholder="请输入内容"
            @blur="inputBlur(scope.row)"
          ></el-input>
          <span v-else>111</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-input
            v-if="
              scope.row.index === clickCellIndex &&
              scope.column.label == clickCellLabel
            "
            v-model="scope.row.address"
            placeholder="请输入内容"
            @blur="inputBlur(scope.row)"
          ></el-input>
          <span v-else>111</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      clickCellIndex: null,
      clickCellLabel: ""
    }
  },
  methods: {
    add() {
      for (let i = 0; i < 3000; i++) {
        let obj = {
          date: '',
          name: '',
          address: ''
        }
        this.tableData.push(obj)
      }
    },
    tableRowClassName({ row, rowIndex, columnIndex, column }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    handleRowClick(row, column) {
      this.clickCellIndex = row.index;
      this.clickCellLabel = column.label;
    },
    inputBlur(row) {
      this.clickCellIndex = null;
      this.clickCellLabel = "";
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0px;
}
</style>

效果如下：