经过多方测试最终选择了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]}