Element plus 虚拟列表

<template>
  <div class="section">
    <div class="section-header flex-between">
      <div>信息</div>
      <div v-if="!isReadOnly">
        <el-button type="primary" size="small">增加</el-button>
        <el-button type="primary" size="small">导出模版</el-button>
        <el-button type="primary" size="small">Excel导入</el-button>
        <el-button type="primary" size="small">删除</el-button>
      </div>
    </div>
    <div class="dymgrid">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-form>
            <el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height"
              :table-layout="tableLayout" />
          </el-form>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>

<script setup lang="ts">
const tableLayout = ref('fixed')
import { ref, inject, computed, watch } from 'vue';
const props = defineProps({
  tabData: {
    type: Array,
    required: true,
  }
})

const columns = ref<any>(
  [
    {
      title: '序号',
      key: 'index',
      align: 'center',
      dataKey: 'index',
      width: 60,
      cellRenderer: (cellData: any) =>
      (
        `${cellData.rowIndex + 1}`
      )
    },
    {
      key: 'Nme',
      title: '公司',
      dataKey: 'Nme',
      width: 200,
      align: 'center',
    },
    {
      key: 'CNme',
      title: '回款单位',
      dataKey: 'CNme',
      width: 200,
      align: 'center',
    },
    {
      key: 'Fee',
      title: '费用名称',
      dataKey: 'Fee',
      width: 100,
      align: 'center',
    },
    {
      key: 'NAmt',
      title: '金额',
      dataKey: 'NAmt',
      width: 100,
      align: 'center',
    },
    {
      key: 'CNme',
      title: '收款人名称',
      dataKey: 'CNme',
      width: 200,
      align: 'center',
    },
    {
      key: 'CNo',
      title: '卡号',
      dataKey: 'CNo',
      width: 180,
      align: 'center',
    },
    {
      key: 'CNo',
      title: '开户行',
      dataKey: 'CNo',
      width: 200,
      align: 'center',
    },
    {
      key: 'CSts',
      title: '备注',
      dataKey: 'CSts',
      width: 90,
      align: 'center',
    },
  ]
)

</script>
<style>
.section-header {
  margin-bottom: 12px;
}

.dymgrid {
  width: 100%;
  height: 500px;
}
</style>

let randomArr = [];
for (let i = 0; i < 20; i++) {
    randomArr.push({
        CNo:`名字${Math.floor(Math.random() * 100) + 1}`,
        CAge: `年龄${Math.floor(Math.random() * 100) + 1}`,
        CClass: `班级${Math.floor(Math.random() * 100) + 1}`,
        CScore: `分数${Math.floor(Math.random() * 100) + 1}`,
        CAddress: `地址${Math.floor(Math.random() * 100) + 1}`,
        CDate: new Date().toLocaleDateString(),
    });
}
console.log(JSON.stringify(randomArr));