vue element-ui (可编辑)table加载缓慢问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue element-ui (可编辑)table加载缓慢问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：

公司最近开了个需求会，要求做一个可编辑的table的表格，并且要求该表格添加权限，点击可编辑，时间段跳转（选择时间，跳转到时间当前位置），无分页（要求一页解决），有选中框，有批量处理的功能，input添加校验功能，小图标展示，编辑后局部刷新页面：
1.管理员（可编辑，可查看，可以操控所有权限（内置保存，导出等））；
2.员工（可编辑，可查看，导出，保存）；
3.观察人员（可查看）；

做法：

前后端联调，权限控制。接口在修改完成后，接口获取修改数据，页面部分刷新。使用element table @cell-click="cellClick"方法，获取table下表标实现权限控制，使用input（防止页面卡顿），使用（οnkeyup=“this.value=this.value.replace(/[, ]/g,‘’)”）禁止传空。采用滚动监听，实现头部，底部跳转，标识转变。一个页面展示所有信息，对数据进行优化，减少不必要的信息导致页面卡顿。编辑一个信息，在下面添加一行数据，展示依旧是不可编辑的装态。有权限则可以编辑table页面，否则只能观察，或者显示无权限。

<el-table
      ref="multipleTable"
      :data="supplyEnterTable"
      border
      :height="tableHeight"
      @sort-change="changeSort"
      v-adaptive="{ bottomOffset: 65 }"
      class="tableBig tablemin-height"
      @selection-change="handleRowChange"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
    >
    <el-table-column type="selection" fixed width="55" align="center"> </el-table-column>
	<el-table-column label="姓名" prop="applyName" min-width="130" align="center">
        <template slot-scope="scope">
          <input
            v-if="scope.row.index === rowSwitch && scope.column.index === colSwitch"
            placeholder="请输入姓名"
            v-model.lazy="scope.row.applyName"
            
            class="inputTrim"
          />
           <p v-else>{{ scope.row.applyName }}</p>
        </template>
      </el-table-column>
</el-table>


//单元格点击
    cellClick(row, column) {
      let refsElTable = this.$refs.multipleTable; // 获取表格对象
      if (!this.multipleSelection.includes(row) && this.forHaveShow(row)) {
        refsElTable.toggleRowSelection(row); // 调用选中行方法
      }
      this.rowSwitch = row.index;
      this.colSwitch = column.index;
    },

问题：

数据较大时，页面卡顿，编辑点击缓慢，切换状态缓慢，切换渲染页，无法渲染，页面推进满，会导致页面卡死。
在网上看到问题治标不治本，页面交互太多，大概15个操作，渲染处理页面各类数据，为0不展示等等，导致dom渲染缓慢，速度很慢

解决方案：

最后减少页面dom渲染，减少循环嵌套，使用this.$set局部刷新数据，提取公共方法，将方法大致规整。
修改了element table为umy table来解决卡顿问题，确实改善了这种情况文章来源地址https://www.toymoban.com/news/detail-556855.html

<ux-grid border
      show-overflow
      keep-source
      use-virtual
      ref="multipleTable"      
      :height="tableHeight"
      :highlightCurrentRow="false"
      @sort-change="changeSort"
      v-adaptive="{ bottomOffset: 65 }"
      class="externalTable tableBig tablemin-height"
      :cell-class-name="tableCellClassName"
      @cell-click="cellClick"
      @selection-change="handleRowChange"
      @table-body-scroll="tableScroll"
      :edit-config="{trigger: 'click', mode: 'cell'}">
  <ux-table-column title="信息" field="verifyCommission" min-width="130" align="left" edit-render>
        <template v-slot="scope">
        </template>
        <template v-slot:edit="scope">
        </template>
    </ux-table-column>