vxe-table 启用虚拟滚动加载大数据表格
一般情况渲染表格加载数据不应该太多,但某些场景如果需要加载大数据量,[vxe-table]](https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic) 支持开启大数据量渲染,原理就是只渲染界面能所能看到部分数据,看不到的数据全部收起来,这个渲染起来的性能就非常快了。不过一旦启用虚拟滚动就必然要放弃动态行高、展开行、树结构等特殊功能,毕竟鱼与熊掌不可兼得,自行取舍喽。
下面简单介绍一下如何使用
相关的参数说明(具体参数请看 官方文档):
scrollX 是指横向虚拟滚动, gt 是指当大于 n 列是自动触发渲染大数据
scrollY 是指纵向虚拟滚动, gt 是指当大于 n 行是自动触发渲染大数据
:optimization="{scrollX: {gt: 40}, scrollY: {gt: 200}}"
<vxe-table height="400" :loading="loading" :data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
export default {
data () {
loading: false,
tableData: []
},
created () {
this.loading = true
setTimeout(() => {
var list = []
for(var index = 0; index < 10000; index++){
list.push({
name: 'test' + index,
sex: 'Man',
date: '2019-05-01'
})
}
const startTime = Date.now()
this.tableData = list
this.loading = false
this.$nextTick(() => {
console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
})
}, 300)
}
}
> 渲染完成 157 毫秒
一次性渲染 1w 条数据只用了 157 多毫秒,在线运行 https://jsrun.pro/FIfKp/edit
单元格中一些常见的参数说明:
row:行数据对象
rowIndex:相对于 data 中的索引
$rowIndex:相对于可视区渲染中的行索引(也就是说和实际渲染 tr 相对应)
_rowIndex:相对于当前表格数据的索引(比如排序后、筛选之后等的相对索引)
column:列配置对象
columnIndex:现对于 columns 中的索引
$columnIndex:相对于可视区渲染中的列索引(也就是说和实际渲染 th 相对应)
cell:对应的 th/td 对象
单元格中一些常的方法说明:
加载数据,不会清除条件
loadData()
重新加载数据,会清除所有条件
reloadData()
获取当前表格的数据(完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据)
getTableData():返回 { fullData, visibleData, tableData, footerData }
获取当前表格的列(收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列)
getTableColumn():返回 { collectColumn, fullColumn, visibleColumn, tableColumn }
获取表格数据集(新增的数据、删除的数据、更改的数据)
getRecordset():返回 { insertRecords, removeRecords, updateRecords }