Vue3 + element plus + ts 实现虚拟化表格（可展开附加信息）

需求：
Table V1中，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。
通过 Table V2 的虚拟化表格组件，超大数据渲染将的到优化

展示：

代码： （可直接复制使用）

<template>
  <el-table-v2
    :columns="columnsData"
    :data="stateaData"
    :expand-column-key="columnsData[0].key"
    :width="700"
    :height="500"
  >
     <template #row='props'>
     //这里是改造了官网提供的方法
      <div v-if="(props.rowData.detail)">
        内容区域
      </div>
      <component v-else v-for='(cell ,index) in props.cells' :key='index' :is="cell"/>
    </template>
  </el-table-v2>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
//模拟的数据
  const stateaData = 
    [
    //第一条数据
      { 
        id: 1, 
        userData:{
          value:1,
          workiceceName: "gj",
          workiceceValue: "内容2",
        },
        children: [
          {
            id: '1',
            detail: '1232' //决定你是否需要展开区域，
          }
        ]
      }, 
      //第二条数据
      {
        id: 2, 
        userData:{
          value:2,
          workiceceName: "gj",
          workiceceValue: "内容3",
        },
        children: [
          {
            id: '2',
            detail: '123'
          }
      ]}
  ]
  const columnsData =
    [
      {
        key: `userData.value`,
        dataKey: `userData.value`,
        title: `id标题`,
        width: 100,
      },
      {
        key: `userData.workiceceName`,
        dataKey: `userData.workiceceName`,
        title: `name标题`,
        width: 100,
      }
      ,
      {
        key: `userData.workiceceValue`,
        dataKey: `userData.workiceceValue`,
        title: `内容标题`,
        width: 100,
      }
    ]
 
    return {
      stateaData,
      columnsData
    }
  }
})
</script>

官网：
https://element-plus.gitee.io/zh-CN/component/table-v2.html#%E5%8F%AF%E5%B1%95%E5%BC%80%E7%9A%84%E9%99%84%E5%8A%A0%E4%BF%A1%E6%81%AF