站长目录

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


更新时间:2022-04-15 11:47:09 / 浏览:

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

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

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

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

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

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

3,为PlTable组件增加如下属性:

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

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

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

data(){return{columnVisibles:newArray(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=fieldsthis.columnVisibles=[]this.tableColumnTitleData.forEach(item=>{this.columnVisibles.push(item.state)})}

5,对表格字段进行显隐操作如:

三,底部合计

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

为PlTable组件增加如下属性:

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

比如:

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


相关标签: cssdata()emjstabtableua文档标签滚动其他

上一篇:nrm的安装与使用以及安装常见错误处理...
下一篇:EJS模板引擎如何在客户端浏览器直接使用...

发表评论

温馨提示

做上本站友情链接,在您站上点击一次,即可自动收录并自动排在本站第一位!
<a href="https://www.zzdir.com/" target="_blank">站长目录</a>