vxe-table 启用虚拟滚动加载大数据表格

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-table-column type="seq" width="60">vxe-table-column>
  <vxe-table-column field="name" title="Name">vxe-table-column>
  <vxe-table-column field="sex" title="Sex">vxe-table-column>
  <vxe-table-column field="date" title="Date">vxe-table-column>
  <vxe-table-column field="address" title="Address">vxe-table-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 }