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

 2550

我们知道操作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作者的付出,与人玫瑰手有余香。


本文网址:https://www.zztuku.com/detail-12406.html
站长图库 - Element-UI表格el-table组件渲染大量数据卡顿问题的解决方案
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    手机UI界面设计