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.rid
      return 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([])
          }
        })

      })
    },