表格虚拟化

virtualize: true 使用 Element Plus 的 ElTableV2，只渲染当前可见的行，适合较大的只读列表。它与普通表格使用不同的列渲染流程，请按下面的方式配置尺寸和自定义内容。

3.7.0+

width、height 使用组件 props，必须是数字；不要把 '100%' 或 'auto' 传给虚拟表。每列同时提供数字 width，数据提供稳定的 rowKey。

基础用法

效果预览可直接操作下方示例

500 条固定本地数据，每条都有唯一 ID。容器可横向滚动，表格宽度和高度均通过数字 props 传入。

正在加载示例…

<template>
  <div class="virtual-scroll">
    <avue-crud :data="data" :width="720" :height="360" :option="option" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref(Array.from({ length: 500 }, (_, index) => ({
  id: index + 1,
  name: '成员 ' + (index + 1),
  department: ['研发部', '产品部', '运营部'][index % 3]
})));
const option = ref({
  rowKey: 'id',
  virtualize: true,
  header: false,
  menu: false,
  column: [
    { label: 'ID', prop: 'id', width: 100 },
    { label: '姓名', prop: 'name', width: 260 },
    { label: '部门', prop: 'department', width: 360 }
  ]
});
</script>

<style scoped>
.virtual-scroll { max-width: 100%; overflow-x: auto; }
</style>

<avue-crud :width="720" :height="360" :option="option" :data="data" />

自适应

效果预览可直接操作下方示例

el-auto-resizer 从有确定高度的容器中读取宽高，再作为数字传给 CRUD。调整浏览器宽度可以看到表格跟随容器变化；fixed 控制虚拟表的列布局。

正在加载示例…

<template>
  <div class="virtual-container">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <avue-crud v-if="width > 0 && height > 0"
                   :data="data"
                   :width="width"
                   :height="height"
                   :option="option" />
      </template>
    </el-auto-resizer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref(Array.from({ length: 500 }, (_, index) => ({
  id: index + 1,
  name: '成员 ' + (index + 1),
  department: ['研发部', '产品部', '运营部'][index % 3]
})));
const option = ref({
  rowKey: 'id',
  virtualize: true,
  fixed: true,
  header: false,
  menu: false,
  column: [
    { label: 'ID', prop: 'id', width: 90 },
    { label: '姓名', prop: 'name', width: 180, flexGrow: 1 },
    { label: '部门', prop: 'department', width: 180, flexGrow: 1 }
  ]
});
</script>

<style scoped>
.virtual-container { width: 100%; height: 360px; }
</style>

自定义内容

效果预览可直接操作下方示例

虚拟表使用 cellRenderer，参数中的 cellData 是当前单元格值，rowData 是完整记录，rowIndex 是显示下标。本例使用状态标签。

正在加载示例…

<template>
  <div class="virtual-scroll">
    <avue-crud :data="data" :width="720" :height="360" :option="option" />
  </div>
</template>

<script setup>
import { h, ref } from 'vue';
import { ElTag } from 'element-plus';

const data = ref(Array.from({ length: 100 }, (_, index) => ({
  id: index + 1,
  name: '任务 ' + (index + 1),
  status: index % 2
})));
const option = ref({
  rowKey: 'id',
  virtualize: true,
  header: false,
  menu: false,
  column: [
    { label: 'ID', prop: 'id', width: 100 },
    { label: '任务', prop: 'name', width: 400 },
    {
      label: '状态',
      prop: 'status',
      width: 220,
      cellRenderer: ({ cellData }) => h(
        ElTag,
        { type: cellData === 1 ? 'success' : 'warning' },
        () => cellData === 1 ? '已完成' : '待处理'
      )
    }
  ]
});
</script>

<style scoped>
.virtual-scroll { max-width: 100%; overflow-x: auto; }
</style>

普通列的 render、formatter、字典标签渲染和 prop 插槽不会经过虚拟表的单元格流程。需要这些表现时，在 cellRenderer 中显式转换；自定义表头使用 headerCellRenderer，自行从 Vue 导入 h。

增加菜单

效果预览可直接操作下方示例

普通的操作列不会自动插入虚拟表。本例增加一个 menu 列，在 cellRenderer 中调用 rowEdit / rowDel，并处理 row-update / row-del 完成本地数据更新；下方显示最近操作。

正在加载示例…

<template>
  <div>
    <el-button class="virtual-reset" @click="reset">恢复示例数据</el-button>
    <div class="virtual-scroll">
      <avue-crud ref="crud"
                 v-model="form"
                 :data="data"
                 :width="720"
                 :height="320"
                 :option="option"
                 @row-update="rowUpdate"
                 @row-del="rowDel" />
    </div>
    <p aria-live="polite">{{ message }}</p>
  </div>
</template>

<script setup>
import { h, ref } from 'vue';
import { ElButton } from 'element-plus';

const crud = ref(null);
const form = ref({});
const message = ref('点击自定义操作列中的编辑或删除。操作只修改本地示例。');
const initialRows = () => Array.from({ length: 30 }, (_, index) => ({
  id: index + 1,
  name: '任务 ' + (index + 1),
  owner: ['张三', '李四', '王五'][index % 3]
}));
const data = ref(initialRows());
const option = ref({
  rowKey: 'id',
  virtualize: true,
  header: false,
  menu: false,
  column: [
    { label: 'ID', prop: 'id', width: 80, display: false },
    { label: '任务', prop: 'name', width: 230, rules: [{ required: true, message: '请输入任务名', trigger: 'blur' }] },
    { label: '负责人', prop: 'owner', width: 180 },
    {
      label: '操作',
      prop: 'menu',
      width: 230,
      display: false,
      cellRenderer: ({ rowData, rowIndex }) => h('div', [
        h(ElButton, {
          size: 'small',
          type: 'primary',
          link: true,
          onClick: () => crud.value.rowEdit(rowData, rowIndex)
        }, () => '编辑'),
        h(ElButton, {
          size: 'small',
          type: 'danger',
          link: true,
          onClick: () => crud.value.rowDel(rowData, rowIndex)
        }, () => '删除')
      ])
    }
  ]
});
function rowUpdate(row, index, done) {
  done(row);
  message.value = '已更新 #' + row.id + '：' + row.name;
}
function rowDel(row, index, done) {
  done();
  message.value = '已删除 #' + row.id + '，剩余 ' + data.value.length + ' 条。';
}
function reset() {
  data.value = initialRows();
  message.value = '已恢复 30 条固定示例数据。';
}
</script>

<style scoped>
.virtual-reset { margin-bottom: 16px; }
.virtual-scroll { max-width: 100%; overflow-x: auto; }
</style>

能力边界

普通表格功能	虚拟表使用方式
单元格插槽、字典、formatter	使用 cellRenderer，按 rowData / cellData 自己渲染
默认操作列	显式增加列并使用 cellRenderer
序号、选择、展开列	普通辅助列不会自动创建，需要按 V2 能力单独实现
多级表头、行编辑、行列合并	当前普通列实现不会被虚拟表复用
普通表格的拖拽插件	不适用，插件依赖普通表格 DOM
普通表格实例方法	不能假定全部可用；实例的 $refs.table 是 ElTableV2
卡片模式	virtualize 优先，不能同时作为卡片渲染

表格分页、外部加载态和弹窗表单仍可复用，但列渲染、交互事件应按当前 V2 上下文编写。普通表格的用法见 列配置。