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 }