vue-table的使用，解决懒加载展开列，数据量过大，造成的卡顿问题
场景
有需求，使用懒加载的展开列，当加载的数据量过大，如大于1000条以上，浏览器可能卡死挂了
分析
大量的dom的渲染绘制，导致了浏览器处理不过来
解决
虚拟列表
vue-table 虚拟列表的使用
vue-table官网
<vxe-table border resizable height="100%" ref="xTree" row-id="rid" class="mytable-style":row-class-name="rowBackgroundColor" :key="JSON.stringify(columnList)":row-config="{keyField:'rid'}" show-overflow="tooltip":tree-config="{reserve:true,accordion:true,lazy: true, transform: true, rowField: 'rid', parentField: 'parentId', hasChild: 'haveMultiplePrice', loadMethod: loadChildren}":data="tableData" :scroll-y="{enabled: true,gt:20}" @checkbox-change="selectChangeEvent" @checkbox-all="selectChangeEvent"><vxe-column type="checkbox" width="40" fixed="left" align="center"></vxe-column><vxe-column width="72" fixed="left" title="状态" align="right" tree-node :show-overflow="false"><template #default="{ row }"><el-tooltip class="item" effect="dark" :content="'方案 : ' + row.monitorNames"placement="right-start"><i class="el-icon-bell" v-show="row.monitor == 1"></i></el-tooltip><el-tooltip class="item" effect="dark" content="提示" placement="right-start"><i class="el-icon-view" v-show="row.popup == 1"></i></el-tooltip><span style="opacity: 0;width: 0;display: inline-block;">.</span></template></vxe-column><vxe-column :field="item.prop" :title="item.label" show-overflow :width="item.width":header-align="item.align" :align="item.align" v-for="item in columnList" :key="item.prop":fixed="['scode','sname'].includes(item.prop)?'left':''" :visible="item.visible"><template slot="header"><span slot="reference" title="优先" v-if="item.prop === 'limitLeft'">{{item.label}}<i class="el-icon-question c-blue f14"></i></span><div v-else>{{ item.label }}</div></template></vxe-column>
</vxe-table>selectChangeEvent ({ checked }) {this.multipleSelection = this.$refs.xTree.getCheckboxRecords()},rowBackgroundColor ({ row, rowIndex }) {if (row.stop == 0) {return 'row-ccc'} else if (row.qualify == 1) {return 'row-red'}return null},getColumnData (list) {this.columnList = list;},loadChildren ({ row }) {// row.parentId = row.ridreturn new Promise(resolve => {loadChild({ ldate: row.ldate, scode: row.scode, rid: row.rid }).then(res => {if (res.code === 0) {resolve(res.data.map(item => ({...item,parentId: row.rid,})))} else {resolve([])}})})},