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>

效果如下:
在这里插入图片描述

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐