vue3 el-table表格数据过多加载卡死优化问题

我的解决办法是采用vxe-table 的虚拟滚动
官网链接：https://vxetable.cn/v4/#/table/scroll/scroll

   <vxe-table
          border
          show-overflow
          ref="xTable1"
          height="300"
          :row-config="{isHover: true}">
          <vxe-column type="seq" width="100"></vxe-column>
          <vxe-column field="name" title="Name" sortable></vxe-column>
          <vxe-column field="role" title="Role"></vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
        </vxe-table>
1
2
3
4
5
6
7
8
9
10
11

  import { defineComponent, ref, onMounted, nextTick } from 'vue'
        import { VxeTableInstance } from 'vxe-table'
        import XEUtils from 'xe-utils'

        export default defineComponent({
          setup () {
            const mockList1: any = []
            for (let index = 0; index < 200; index++) {
              mockList1.push({
                name: 'Test' + index,
                role: 'Developer',
                sex: '男'
              })
            }

            const xTable1 = ref<VxeTableInstance>()

            onMounted(() => {
              nextTick(() => {
                const $table = xTable1.value
                if ($table) {
                  $table.loadData(XEUtils.clone(mockList1, true))
                }
              })
            })

            return {
              xTable1
            }
          }
        })
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

如果有不知道接口返回的数据怎么添加进表格的可以私信我，看到就会回复~ 喜欢文章的点个赞再走哦，谢谢支持