Element-UI表格el-table组件渲染大量数据卡顿问题的解决方案

67302022-06-21 15:24:46

我们知道操作dom会引起页面的重绘重排。数据量过多导致浏览器渲染过多的标签元素，频繁的重绘重排导致DOM树占用内存较大使得用户操作阻塞。element-ui中的el-table组件在大数据的渲染上也是差强人意。对于动态数据想要不重新渲染是不可能的，那么只能让他去少渲染。

经过多方测试最终选择了pl-table这个组件。它的实现原理是创建了一个虚拟的x轴和Y轴，通过监听滚动每次只渲染可视区域的数据。官方的文档只有属性介绍对新手不算友好，特别是筛选与合计部分基本没有说，下面就手摸手的教会大家如何使用。

项目地址：

https://github.com/livelyPeng/pl-table

大数据渲染组件pl-table使用说明

一，基础使用

1、引入组件

// main.js中引入样式文件
import 'pl-table/themes/index.css'
// 局部引入组件
import { PlTable, PlTableColumn } from 'pl-table'
components: {PlTable,PlTableColumn}
// 全局引入组件，在mian.js中
import plTable from 'pl-table'
Vue.use(plTable);

两者选择一种即可，我使用的是局部引入

2、替换原el-table,el-table-column组件名

el-table 替换为 PlTable
el-table-column 替换为 PlTableColumn

3、为PlTable组件增加如下属性：

use-virtual   // 开启虚拟渲染
:height="tableHeight" // 表格的高度
:row-height="35" // 表格每行的高度

注意：假如你的tableHeight和我一样是计算得来，请在PlTable上增加高度判断v-if=”tableHeight>0″。因为该组件必须建立在有固定高度及行高的情况下才可生效。

二，字段筛选

注：(如果不需要字段筛选，请忽略本段内容，实测有一些小bug存在)

1、在data中声明一个空数组(该数组长度等于你的字段个数)

如：

data() {
  return {
    columnVisibles:new Array(37).fill(true),
  }
}

2、为PlTable组件增加如下属性：

ref="data-table"
:dialog-data="tableColumnTitleData" // 筛选的列名
@show-field="showFields" // 触发筛选事件

tableColumnTitleData 数据格式如下

tableColumnTitleData: [
  { name: '复选框', state: true, disabled: true }, // state: true 选中状态 | disabled: true 是否禁用
  { name: '序号', state: true, disabled: true },
  { name: '姓名', state: true },
  { name: '年龄', state: true },
  { name: '性别', state: true },
]

3、打开筛选弹窗

可以增加一个按钮，调用如下方法即可

this.$refs['data-table'].plDialogOpens()

4、触发筛选，回调参数为tableColumnTitleData的当前值，拿到该值后可对表格字段进行显隐操作(不限于我提供的方式)

比如：

showFields(fields) {
  this.tableColumnTitleData = fields
  this.columnVisibles = []
  this.tableColumnTitleData.forEach(item => {
    this.columnVisibles.push(item.state)
  })
}

5、对表格字段进行显隐操作

如：

<PlTableColumn
  v-if="columnVisibles[2]"
  prop="name"
  label="姓名"
/>

三，底部合计

注：(如果不需要合计，请忽略本段内容)

为PlTable组件增加如下属性：

show-summary // 开启合计
:summary-method="summaryMethod" // 自定义合计方法，用法请参考el-table文档

比如：

summaryMethod({ columns, data }) {
  const combined = [] // 合计
  columns.forEach((column, columnIndex) => {
    if (columnIndex === 0) {
      combined.push('合计')
    } else {
      switch (column.label) {
        case '年龄':
          combined[columnIndex] = this.sumAge // 我这里是已经统计好了直接赋值的，请根据自己业务调整
          break
        default:
          combined[columnIndex] = ''
      }
    }
  })
  // 返回一个二维数组的表尾合计
  return [combined]
}

最后：感谢pl-table作者的付出，与人玫瑰手有余香。