解决el-table大数据表格卡顿问题
使用umyui中的表格组件
当u-table
元素中注入data
对象数组后,添加use-virtual
属性开启虚拟,同时设置row-height
行高(它有默认值,请看文档),同时必须给定height
,或者max-height
。
使用ux-grid组件
在需要实现表格合并功能时,使用ux-grid
组件;
使用ux-grid
树表格, 虚拟滚动自动关闭;
合并表格使用的api与element-ui
中的el-table
的api是差不多的:
<ux-grid ref="plxTree"
show-overflow="tooltip"
:height="height"
:checkbox-config="{highlight: true}"
:tree-config="{children: 'contList' }"
row-id="rowKey"
:data="data"
border
:span-method="arraySpanMethod"
@selection-change="selectData">
<ux-table-column type="checkbox"
:selectable='selectable'
width="55"
tree-node>
</ux-table-column>
......
<ux-table-column resizable
show-overflow
min-width="100"
field="name"
title="名字"></ux-table-column>
</ux-grid>
methods:{
// 合并表格行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.contList) {
if (columnIndex === 1) {
return { rowspan: 1, colspan: 13 }
} else if (columnIndex > 1) {
return { rowspan: 0, colspan: 0 }
}
}
},
//判断是否可选 正能选择有子数组的父元素行
selectable(row, index) {
if (row.contList) {
return true
} else {
return false
}
}
}
记录滚动条位置
实现功能:
当返回页面时滚动条需要回到原来的页面位置,最开始的时候使用el-table中的方法时一直不行,后面使用元素查看,发现ux-grid组件有一个elx-table–body-wrapper类名,再根据类名选择元素,记录滚动条的位置。
当要记录ux-grid表格的滚动条位置时,使用如下方式:
//记录表格滚动条位置
document.getElementsByClassName('elx-table--body-wrapper')[0].scrollTop