Table 表格

功能强大的表格组件，支持排序、筛选、分页、固定列、行选中、合并单元格、展开行、树形表格、拖拽排序、可编辑单元格、总结行、列设置、列宽拖拽和虚拟滚动。

基础用法

通过 data 传入数据，columns 定义列配置。

姓名	年龄	城市	邮箱
张三	28	北京	zhangsan@example.com
李四	32	上海	lisi@example.com
王五	25	广州	wangwu@example.com

<template>
  <ZcTable :data="tableData" :columns="columns" border />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
  { prop: 'email', label: '邮箱' },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', email: 'zhangsan@example.com' },
  { name: '李四', age: 32, city: '上海', email: 'lisi@example.com' },
  { name: '王五', age: 25, city: '广州', email: 'wangwu@example.com' },
]
</script>

斑马纹与边框

通过 stripe 属性实现斑马纹交替行，border 显示表格边框。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	25	广州

<template>
  <ZcTable :data="tableData" :columns="columns" stripe border />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'city', label: '城市', align: 'center' },
]
const tableData = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' },
  { name: '王五', age: 25, city: '广州' },
]
</script>

排序与筛选

设置 sortable 启用排序，filterable 和 filters 启用筛选。

姓名↑↓	年龄↑↓	城市
张三	28	北京
李四	32	上海
王五	25	广州

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    border
    @sort-change="handleSortChange"
    @filter-change="handleFilterChange"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', sortable: true },
  { prop: 'age', label: '年龄', sortable: true },
  {
    prop: 'city',
    label: '城市',
    filterable: true,
    filters: [
      { text: '北京', value: '北京' },
      { text: '上海', value: '上海' },
      { text: '广州', value: '广州' },
    ],
  },
]
const tableData = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' },
  { name: '王五', age: 25, city: '广州' },
]

function handleSortChange(sort) {
  console.log('排序变化:', sort)
}
function handleFilterChange(filters) {
  console.log('筛选变化:', filters)
}
</script>

自定义排序（后端排序）

设置 sortable: 'custom' 时，表格组件不会在前端排序数据，而是通过 sort-change 事件通知父组件，由父组件自行请求后端接口获取排序后的数据。

姓名	年龄↑↓
张三	28
李四	32

<template>
  <ZcTable :data="tableData" :columns="columns" border @sort-change="handleSortChange" />
</template>

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

const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄', sortable: 'custom' },
]

const tableData = ref([
  { name: '张三', age: 28 },
  { name: '李四', age: 32 },
])

async function handleSortChange({ prop, order }) {
  console.log(`后端排序: 字段=${prop}, 方向=${order}`)
  // order 为 'ascending' | 'descending' | null
  // 在此处调用后端 API 获取排序后的数据
  // const res = await api.getList({ sortField: prop, sortOrder: order })
  // tableData.value = res.data
}
</script>

分页

设置 pagination 启用分页，通过 currentPage 和 pageSize 控制。

日期	姓名	金额
2024-01-01	用户1	7310
2024-01-02	用户2	5879
2024-01-03	用户3	46
2024-01-04	用户4	1539
2024-01-05	用户5	751

共 20 条

• 1
• 2
• 3
• 4

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    pagination
    :page-size="5"
    border
    @current-change="handlePageChange"
  />
</template>

<script setup>
const columns = [
  { prop: 'date', label: '日期', width: 120 },
  { prop: 'name', label: '姓名', width: 100 },
  { prop: 'amount', label: '金额', align: 'right' },
]
const tableData = Array.from({ length: 20 }, (_, i) => ({
  date: `2024-01-${String(i + 1).padStart(2, '0')}`,
  name: `用户${i + 1}`,
  amount: Math.floor(Math.random() * 10000),
}))

function handlePageChange(page) {
  console.log('当前页:', page)
}
</script>

行选中

设置 selectable 启用复选框行选择。

	姓名	年龄	城市
	张三	28	北京
	李四	32	上海
	王五	25	广州

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    selectable
    border
    @selection-change="handleSelectionChange"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'city', label: '城市' },
]
const tableData = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' },
  { name: '王五', age: 25, city: '广州' },
]

function handleSelectionChange(selection) {
  console.log('选中行:', selection)
}
</script>

固定列

通过 column.fixed 设置列固定方向。支持 'left'、'right' 和 true（等同 'left'）。固定列使用 CSS sticky 定位，横向滚动时保持可见。

姓名	年龄	城市	邮箱	地址	电话	公司	薪资
张三	28	北京	zhangsan@example.com	朝阳区xx路	13800001111	科技公司A	15000
李四	32	上海	lisi@example.com	浦东新区xx路	13800002222	互联网公司B	25000
王五	25	广州	wangwu@example.com	天河区xx路	13800003333	金融公司C	18000

<template>
  <ZcTable :data="tableData" :columns="columns" border />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 100, fixed: 'left' },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
  { prop: 'email', label: '邮箱', width: 200 },
  { prop: 'address', label: '地址', width: 300 },
  { prop: 'phone', label: '电话', width: 150 },
  { prop: 'company', label: '公司', width: 180 },
  { prop: 'salary', label: '薪资', width: 100, fixed: 'right' },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', email: 'zhangsan@example.com', address: '朝阳区xx路', phone: '13800001111', company: '科技公司A', salary: 15000 },
  { name: '李四', age: 32, city: '上海', email: 'lisi@example.com', address: '浦东新区xx路', phone: '13800002222', company: '互联网公司B', salary: 25000 },
  { name: '王五', age: 25, city: '广州', email: 'wangwu@example.com', address: '天河区xx路', phone: '13800003333', company: '金融公司C', salary: 18000 },
]
</script>

合并行/列

通过 spanMethod 属性自定义单元格合并逻辑。函数接收 { row, column, rowIndex, columnIndex }，返回 { rowspan, colspan } 对象、[rowspan, colspan] 数组或 undefined（表示不合并）。

姓名	年龄	城市	邮箱
张三	28	北京	zhangsan@example.com
	30	上海	zhangsan2@example.com
李四	32	广州	lisi@example.com
王五	25	深圳	wangwu@example.com

<template>
  <ZcTable :data="tableData" :columns="columns" border :span-method="spanMethod" />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
  { prop: 'email', label: '邮箱' },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', email: 'zhangsan@example.com' },
  { name: '张三', age: 30, city: '上海', email: 'zhangsan2@example.com' },
  { name: '李四', age: 32, city: '广州', email: 'lisi@example.com' },
  { name: '王五', age: 25, city: '深圳', email: 'wangwu@example.com' },
]

// 合并第一列中相同姓名的行
function spanMethod({ rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex === 0) return { rowspan: 2, colspan: 1 }
    if (rowIndex === 1) return { rowspan: 0, colspan: 0 }
  }
  return { rowspan: 1, colspan: 1 }
}
</script>

展开行

设置 expandable 启用展开行功能，通过 #expand 插槽自定义展开内容。

	姓名	年龄	城市
	张三	28	北京
	李四	32	上海
	王五	25	广州

<template>
  <ZcTable :data="tableData" :columns="columns" border expandable @expand-change="handleExpandChange">
    <template #expand="{ row }">
      <div style="padding: 16px; background: #f9f9f9;">
        <h4>{{ row.name }} 的详细信息</h4>
        <p>年龄：{{ row.age }}</p>
        <p>城市：{{ row.city }}</p>
        <p>邮箱：{{ row.email }}</p>
      </div>
    </template>
  </ZcTable>
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', email: 'zhangsan@example.com' },
  { name: '李四', age: 32, city: '上海', email: 'lisi@example.com' },
  { name: '王五', age: 25, city: '广州', email: 'wangwu@example.com' },
]

function handleExpandChange(row, expanded) {
  console.log('展开/收起:', row.name, expanded)
}
</script>

树形表格

通过 treeProps 配置树形数据的子节点字段名和缩进。设置 defaultExpandAll 默认展开所有节点。

名称	数量
部门 A	50
部门 B	40

<template>
  <ZcTable
    :data="treeData"
    :columns="columns"
    border
    :tree-props="{ children: 'children', indent: 20 }"
    @tree-toggle="handleTreeToggle"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '名称' },
  { prop: 'count', label: '数量', width: 100 },
]
const treeData = [
  {
    id: 1,
    name: '部门 A',
    count: 50,
    children: [
      { id: 11, name: '小组 A-1', count: 20 },
      { id: 12, name: '小组 A-2', count: 30 },
    ],
  },
  {
    id: 2,
    name: '部门 B',
    count: 40,
    children: [
      { id: 21, name: '小组 B-1', count: 15 },
      { id: 22, name: '小组 B-2', count: 25 },
    ],
  },
]

function handleTreeToggle(row, expanded) {
  console.log('树节点切换:', row.name, expanded)
}
</script>

自定义列渲染

通过具名插槽 #cell-[prop] 自定义单元格内容，通过 #header-[prop] 自定义表头内容。也可以通过 formatter 函数格式化单元格内容。

⭐ 姓名	年龄	城市	状态
张三	28	北京	● 在线
李四	32	上海	● 离线
王五	25	广州	● 在线

<template>
  <ZcTable :data="tableData" :columns="columns" border>
    <template #header-name>
      <span style="color: #409eff;">⭐ 姓名</span>
    </template>
    <template #cell-name="{ row }">
      <strong style="color: #409eff;">{{ row.name }}</strong>
    </template>
    <template #cell-status="{ row }">
      <span :style="{ color: row.status === 'active' ? '#67c23a' : '#f56c6c' }">
        {{ row.status === 'active' ? '● 在线' : '● 离线' }}
      </span>
    </template>
  </ZcTable>
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
  { prop: 'status', label: '状态', width: 100 },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', status: 'active' },
  { name: '李四', age: 32, city: '上海', status: 'inactive' },
  { name: '王五', age: 25, city: '广州', status: 'active' },
]
</script>

拖拽排序

设置 draggable 启用行拖拽排序。拖拽完成后触发 row-drag-end 事件，返回 { oldIndex, newIndex, data }。

⚠️ 注意：拖拽排序基于扁平行索引，不建议与树形表格（treeProps）同时使用。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	25	广州
赵六	30	深圳

<template>
  <ZcTable :data="tableData" :columns="columns" border draggable @row-drag-end="handleDragEnd" />
</template>

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

const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
]
const tableData = ref([
  { id: 1, name: '张三', age: 28, city: '北京' },
  { id: 2, name: '李四', age: 32, city: '上海' },
  { id: 3, name: '王五', age: 25, city: '广州' },
  { id: 4, name: '赵六', age: 30, city: '深圳' },
])

function handleDragEnd({ oldIndex, newIndex, data }) {
  console.log(`从 ${oldIndex} 移动到 ${newIndex}`)
  tableData.value = data
}
</script>

可编辑表格

设置 editable 启用单元格编辑。点击单元格进入编辑模式，回车确认，ESC 取消。通过 column.editable 可以单独控制某列是否可编辑。也可以通过 column.editComponent 指定自定义编辑组件。

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	25	广州

<template>
  <ZcTable :data="tableData" :columns="columns" border editable @cell-edit="handleCellEdit" />
</template>

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

const columns = [
  { prop: 'name', label: '姓名', width: 120, editable: true },
  { prop: 'age', label: '年龄', width: 80, editable: true },
  { prop: 'city', label: '城市', editable: false },
]
const tableData = ref([
  { id: 1, name: '张三', age: 28, city: '北京' },
  { id: 2, name: '李四', age: 32, city: '上海' },
  { id: 3, name: '王五', age: 25, city: '广州' },
])

function handleCellEdit({ row, column, value, oldValue }) {
  console.log(`编辑: ${column.label} 从 "${oldValue}" 改为 "${value}"`)
}
</script>

总结行

设置 showSummary 在表格底部显示合计行。默认对数值列求和。通过 summaryMethod 自定义合计逻辑，summaryText 自定义首列标签。

ℹ️ 当同时使用分页时，合计行基于全量数据计算（排序和过滤后），而非当前页。

商品名称	单价	数量	小计
商品 A	100	3	300
商品 B	200	2	400
商品 C	50	10	500
总计	350	15	1200

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    border
    show-summary
    summary-text="总计"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '商品名称', width: 150 },
  { prop: 'price', label: '单价', width: 100, align: 'right' },
  { prop: 'quantity', label: '数量', width: 100, align: 'right' },
  { prop: 'total', label: '小计', align: 'right' },
]
const tableData = [
  { name: '商品 A', price: 100, quantity: 3, total: 300 },
  { name: '商品 B', price: 200, quantity: 2, total: 400 },
  { name: '商品 C', price: 50, quantity: 10, total: 500 },
]
</script>

列设置

设置 showColumnSettings 显示列设置面板。用户可以切换列的显示/隐藏和排序。列设置变更时触发 column-settings-change 事件。

姓名	年龄	城市	邮箱	电话
张三	28	北京	zhangsan@example.com	13800001111
李四	32	上海	lisi@example.com	13800002222
王五	25	广州	wangwu@example.com	13800003333

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    border
    show-column-settings
    @column-settings-change="handleSettingsChange"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'city', label: '城市', width: 120 },
  { prop: 'email', label: '邮箱', width: 200 },
  { prop: 'phone', label: '电话', width: 150 },
]
const tableData = [
  { name: '张三', age: 28, city: '北京', email: 'zhangsan@example.com', phone: '13800001111' },
  { name: '李四', age: 32, city: '上海', email: 'lisi@example.com', phone: '13800002222' },
  { name: '王五', age: 25, city: '广州', email: 'wangwu@example.com', phone: '13800003333' },
]

function handleSettingsChange(settings) {
  console.log('列设置变更:', settings)
}
</script>

列宽拖拽

设置 resizable 启用列宽拖拽功能。拖拽表头右侧边缘调整列宽，最小宽度为 40px。通过 column.resizable 可以禁用特定列的拖拽。拖拽结束时触发 column-resize 事件。

姓名（可拖拽）	年龄	城市（禁用拖拽）
张三	28	北京
李四	32	上海
王五	25	广州

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    border
    resizable
    @column-resize="handleColumnResize"
  />
</template>

<script setup>
const columns = [
  { prop: 'name', label: '姓名（可拖拽）', width: 150 },
  { prop: 'age', label: '年龄', width: 100 },
  { prop: 'city', label: '城市（禁用拖拽）', width: 150, resizable: false },
]
const tableData = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' },
  { name: '王五', age: 25, city: '广州' },
]

function handleColumnResize({ prop, oldWidth, newWidth }) {
  console.log(`列 ${prop}: ${oldWidth}px → ${newWidth}px`)
}
</script>

虚拟滚动

设置 virtual 启用虚拟滚动以优化大数据量渲染性能。需要同时设置 height 属性。estimatedRowHeight 控制预估行高（默认 48px）。

⚠️ 虚拟滚动不兼容分页（pagination）和树形表格（treeProps）。

基础用法

最简单的虚拟滚动用法，只需添加 virtual 和 height 属性即可。

<template #source><ZcDemo__home_runner_work_zc_ui_zc_ui_docs_components_table_md_17 /></template>

    <template>
    <ZcTable
    :data="bigData"
    :columns="columns"
  border
virtual
:height="300"
:estimated-row-height="48"
/>
  </template>
  
  <script setup>
const columns = [
{ prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'value', label: '数值' },
  ]
const bigData = Array.from({ length: 1000 }, (_, i) => ({
id: i + 1,
name: `用户 ${i + 1}`,
value: Math.floor(Math.random() * 10000),
}))
</script>

虚拟滚动 + 排序

虚拟模式下支持所有排序功能。

ID↑↓	姓名↑↓	年龄↑↓	城市
1	用户 1	20	北京
2	用户 2	21	上海
3	用户 3	22	广州
4	用户 4	23	深圳
5	用户 5	24	北京
6	用户 6	25	上海
7	用户 7	26	广州
8	用户 8	27	深圳
9	用户 9	28	北京
10	用户 10	29	上海
11	用户 11	30	广州
12	用户 12	31	深圳
13	用户 13	32	北京
14	用户 14	33	上海
15	用户 15	34	广州
16	用户 16	35	深圳
17	用户 17	36	北京
18	用户 18	37	上海
19	用户 19	38	广州
20	用户 20	39	深圳
21	用户 21	40	北京
22	用户 22	41	上海
23	用户 23	42	广州
24	用户 24	43	深圳
25	用户 25	44	北京
26	用户 26	45	上海
27	用户 27	46	广州
28	用户 28	47	深圳
29	用户 29	48	北京
30	用户 30	49	上海
31	用户 31	50	广州
32	用户 32	51	深圳
33	用户 33	52	北京
34	用户 34	53	上海
35	用户 35	54	广州
36	用户 36	55	深圳
37	用户 37	56	北京
38	用户 38	57	上海
39	用户 39	58	广州
40	用户 40	59	深圳
41	用户 41	60	北京
42	用户 42	61	上海
43	用户 43	62	广州
44	用户 44	63	深圳
45	用户 45	64	北京
46	用户 46	65	上海
47	用户 47	66	广州
48	用户 48	67	深圳
49	用户 49	68	北京
50	用户 50	69	上海
51	用户 51	20	广州
52	用户 52	21	深圳
53	用户 53	22	北京
54	用户 54	23	上海
55	用户 55	24	广州
56	用户 56	25	深圳
57	用户 57	26	北京
58	用户 58	27	上海
59	用户 59	28	广州
60	用户 60	29	深圳
61	用户 61	30	北京
62	用户 62	31	上海
63	用户 63	32	广州
64	用户 64	33	深圳
65	用户 65	34	北京
66	用户 66	35	上海
67	用户 67	36	广州
68	用户 68	37	深圳
69	用户 69	38	北京
70	用户 70	39	上海
71	用户 71	40	广州
72	用户 72	41	深圳
73	用户 73	42	北京
74	用户 74	43	上海
75	用户 75	44	广州
76	用户 76	45	深圳
77	用户 77	46	北京
78	用户 78	47	上海
79	用户 79	48	广州
80	用户 80	49	深圳
81	用户 81	50	北京
82	用户 82	51	上海
83	用户 83	52	广州
84	用户 84	53	深圳
85	用户 85	54	北京
86	用户 86	55	上海
87	用户 87	56	广州
88	用户 88	57	深圳
89	用户 89	58	北京
90	用户 90	59	上海
91	用户 91	60	广州
92	用户 92	61	深圳
93	用户 93	62	北京
94	用户 94	63	上海
95	用户 95	64	广州
96	用户 96	65	深圳
97	用户 97	66	北京
98	用户 98	67	上海
99	用户 99	68	广州
100	用户 100	69	深圳
101	用户 101	20	北京
102	用户 102	21	上海
103	用户 103	22	广州
104	用户 104	23	深圳
105	用户 105	24	北京
106	用户 106	25	上海
107	用户 107	26	广州
108	用户 108	27	深圳
109	用户 109	28	北京
110	用户 110	29	上海
111	用户 111	30	广州
112	用户 112	31	深圳
113	用户 113	32	北京
114	用户 114	33	上海
115	用户 115	34	广州
116	用户 116	35	深圳
117	用户 117	36	北京
118	用户 118	37	上海
119	用户 119	38	广州
120	用户 120	39	深圳
121	用户 121	40	北京
122	用户 122	41	上海
123	用户 123	42	广州
124	用户 124	43	深圳
125	用户 125	44	北京
126	用户 126	45	上海
127	用户 127	46	广州
128	用户 128	47	深圳
129	用户 129	48	北京
130	用户 130	49	上海
131	用户 131	50	广州
132	用户 132	51	深圳
133	用户 133	52	北京
134	用户 134	53	上海
135	用户 135	54	广州
136	用户 136	55	深圳
137	用户 137	56	北京
138	用户 138	57	上海
139	用户 139	58	广州
140	用户 140	59	深圳
141	用户 141	60	北京
142	用户 142	61	上海
143	用户 143	62	广州
144	用户 144	63	深圳
145	用户 145	64	北京
146	用户 146	65	上海
147	用户 147	66	广州
148	用户 148	67	深圳
149	用户 149	68	北京
150	用户 150	69	上海
151	用户 151	20	广州
152	用户 152	21	深圳
153	用户 153	22	北京
154	用户 154	23	上海
155	用户 155	24	广州
156	用户 156	25	深圳
157	用户 157	26	北京
158	用户 158	27	上海
159	用户 159	28	广州
160	用户 160	29	深圳
161	用户 161	30	北京
162	用户 162	31	上海
163	用户 163	32	广州
164	用户 164	33	深圳
165	用户 165	34	北京
166	用户 166	35	上海
167	用户 167	36	广州
168	用户 168	37	深圳
169	用户 169	38	北京
170	用户 170	39	上海
171	用户 171	40	广州
172	用户 172	41	深圳
173	用户 173	42	北京
174	用户 174	43	上海
175	用户 175	44	广州
176	用户 176	45	深圳
177	用户 177	46	北京
178	用户 178	47	上海
179	用户 179	48	广州
180	用户 180	49	深圳
181	用户 181	50	北京
182	用户 182	51	上海
183	用户 183	52	广州
184	用户 184	53	深圳
185	用户 185	54	北京
186	用户 186	55	上海
187	用户 187	56	广州
188	用户 188	57	深圳
189	用户 189	58	北京
190	用户 190	59	上海
191	用户 191	60	广州
192	用户 192	61	深圳
193	用户 193	62	北京
194	用户 194	63	上海
195	用户 195	64	广州
196	用户 196	65	深圳
197	用户 197	66	北京
198	用户 198	67	上海
199	用户 199	68	广州
200	用户 200	69	深圳
201	用户 201	20	北京
202	用户 202	21	上海
203	用户 203	22	广州
204	用户 204	23	深圳
205	用户 205	24	北京
206	用户 206	25	上海
207	用户 207	26	广州
208	用户 208	27	深圳
209	用户 209	28	北京
210	用户 210	29	上海
211	用户 211	30	广州
212	用户 212	31	深圳
213	用户 213	32	北京
214	用户 214	33	上海
215	用户 215	34	广州
216	用户 216	35	深圳
217	用户 217	36	北京
218	用户 218	37	上海
219	用户 219	38	广州
220	用户 220	39	深圳
221	用户 221	40	北京
222	用户 222	41	上海
223	用户 223	42	广州
224	用户 224	43	深圳
225	用户 225	44	北京
226	用户 226	45	上海
227	用户 227	46	广州
228	用户 228	47	深圳
229	用户 229	48	北京
230	用户 230	49	上海
231	用户 231	50	广州
232	用户 232	51	深圳
233	用户 233	52	北京
234	用户 234	53	上海
235	用户 235	54	广州
236	用户 236	55	深圳
237	用户 237	56	北京
238	用户 238	57	上海
239	用户 239	58	广州
240	用户 240	59	深圳
241	用户 241	60	北京
242	用户 242	61	上海
243	用户 243	62	广州
244	用户 244	63	深圳
245	用户 245	64	北京
246	用户 246	65	上海
247	用户 247	66	广州
248	用户 248	67	深圳
249	用户 249	68	北京
250	用户 250	69	上海
251	用户 251	20	广州
252	用户 252	21	深圳
253	用户 253	22	北京
254	用户 254	23	上海
255	用户 255	24	广州
256	用户 256	25	深圳
257	用户 257	26	北京
258	用户 258	27	上海
259	用户 259	28	广州
260	用户 260	29	深圳
261	用户 261	30	北京
262	用户 262	31	上海
263	用户 263	32	广州
264	用户 264	33	深圳
265	用户 265	34	北京
266	用户 266	35	上海
267	用户 267	36	广州
268	用户 268	37	深圳
269	用户 269	38	北京
270	用户 270	39	上海
271	用户 271	40	广州
272	用户 272	41	深圳
273	用户 273	42	北京
274	用户 274	43	上海
275	用户 275	44	广州
276	用户 276	45	深圳
277	用户 277	46	北京
278	用户 278	47	上海
279	用户 279	48	广州
280	用户 280	49	深圳
281	用户 281	50	北京
282	用户 282	51	上海
283	用户 283	52	广州
284	用户 284	53	深圳
285	用户 285	54	北京
286	用户 286	55	上海
287	用户 287	56	广州
288	用户 288	57	深圳
289	用户 289	58	北京
290	用户 290	59	上海
291	用户 291	60	广州
292	用户 292	61	深圳
293	用户 293	62	北京
294	用户 294	63	上海
295	用户 295	64	广州
296	用户 296	65	深圳
297	用户 297	66	北京
298	用户 298	67	上海
299	用户 299	68	广州
300	用户 300	69	深圳
301	用户 301	20	北京
302	用户 302	21	上海
303	用户 303	22	广州
304	用户 304	23	深圳
305	用户 305	24	北京
306	用户 306	25	上海
307	用户 307	26	广州
308	用户 308	27	深圳
309	用户 309	28	北京
310	用户 310	29	上海
311	用户 311	30	广州
312	用户 312	31	深圳
313	用户 313	32	北京
314	用户 314	33	上海
315	用户 315	34	广州
316	用户 316	35	深圳
317	用户 317	36	北京
318	用户 318	37	上海
319	用户 319	38	广州
320	用户 320	39	深圳
321	用户 321	40	北京
322	用户 322	41	上海
323	用户 323	42	广州
324	用户 324	43	深圳
325	用户 325	44	北京
326	用户 326	45	上海
327	用户 327	46	广州
328	用户 328	47	深圳
329	用户 329	48	北京
330	用户 330	49	上海
331	用户 331	50	广州
332	用户 332	51	深圳
333	用户 333	52	北京
334	用户 334	53	上海
335	用户 335	54	广州
336	用户 336	55	深圳
337	用户 337	56	北京
338	用户 338	57	上海
339	用户 339	58	广州
340	用户 340	59	深圳
341	用户 341	60	北京
342	用户 342	61	上海
343	用户 343	62	广州
344	用户 344	63	深圳
345	用户 345	64	北京
346	用户 346	65	上海
347	用户 347	66	广州
348	用户 348	67	深圳
349	用户 349	68	北京
350	用户 350	69	上海
351	用户 351	20	广州
352	用户 352	21	深圳
353	用户 353	22	北京
354	用户 354	23	上海
355	用户 355	24	广州
356	用户 356	25	深圳
357	用户 357	26	北京
358	用户 358	27	上海
359	用户 359	28	广州
360	用户 360	29	深圳
361	用户 361	30	北京
362	用户 362	31	上海
363	用户 363	32	广州
364	用户 364	33	深圳
365	用户 365	34	北京
366	用户 366	35	上海
367	用户 367	36	广州
368	用户 368	37	深圳
369	用户 369	38	北京
370	用户 370	39	上海
371	用户 371	40	广州
372	用户 372	41	深圳
373	用户 373	42	北京
374	用户 374	43	上海
375	用户 375	44	广州
376	用户 376	45	深圳
377	用户 377	46	北京
378	用户 378	47	上海
379	用户 379	48	广州
380	用户 380	49	深圳
381	用户 381	50	北京
382	用户 382	51	上海
383	用户 383	52	广州
384	用户 384	53	深圳
385	用户 385	54	北京
386	用户 386	55	上海
387	用户 387	56	广州
388	用户 388	57	深圳
389	用户 389	58	北京
390	用户 390	59	上海
391	用户 391	60	广州
392	用户 392	61	深圳
393	用户 393	62	北京
394	用户 394	63	上海
395	用户 395	64	广州
396	用户 396	65	深圳
397	用户 397	66	北京
398	用户 398	67	上海
399	用户 399	68	广州
400	用户 400	69	深圳
401	用户 401	20	北京
402	用户 402	21	上海
403	用户 403	22	广州
404	用户 404	23	深圳
405	用户 405	24	北京
406	用户 406	25	上海
407	用户 407	26	广州
408	用户 408	27	深圳
409	用户 409	28	北京
410	用户 410	29	上海
411	用户 411	30	广州
412	用户 412	31	深圳
413	用户 413	32	北京
414	用户 414	33	上海
415	用户 415	34	广州
416	用户 416	35	深圳
417	用户 417	36	北京
418	用户 418	37	上海
419	用户 419	38	广州
420	用户 420	39	深圳
421	用户 421	40	北京
422	用户 422	41	上海
423	用户 423	42	广州
424	用户 424	43	深圳
425	用户 425	44	北京
426	用户 426	45	上海
427	用户 427	46	广州
428	用户 428	47	深圳
429	用户 429	48	北京
430	用户 430	49	上海
431	用户 431	50	广州
432	用户 432	51	深圳
433	用户 433	52	北京
434	用户 434	53	上海
435	用户 435	54	广州
436	用户 436	55	深圳
437	用户 437	56	北京
438	用户 438	57	上海
439	用户 439	58	广州
440	用户 440	59	深圳
441	用户 441	60	北京
442	用户 442	61	上海
443	用户 443	62	广州
444	用户 444	63	深圳
445	用户 445	64	北京
446	用户 446	65	上海
447	用户 447	66	广州
448	用户 448	67	深圳
449	用户 449	68	北京
450	用户 450	69	上海
451	用户 451	20	广州
452	用户 452	21	深圳
453	用户 453	22	北京
454	用户 454	23	上海
455	用户 455	24	广州
456	用户 456	25	深圳
457	用户 457	26	北京
458	用户 458	27	上海
459	用户 459	28	广州
460	用户 460	29	深圳
461	用户 461	30	北京
462	用户 462	31	上海
463	用户 463	32	广州
464	用户 464	33	深圳
465	用户 465	34	北京
466	用户 466	35	上海
467	用户 467	36	广州
468	用户 468	37	深圳
469	用户 469	38	北京
470	用户 470	39	上海
471	用户 471	40	广州
472	用户 472	41	深圳
473	用户 473	42	北京
474	用户 474	43	上海
475	用户 475	44	广州
476	用户 476	45	深圳
477	用户 477	46	北京
478	用户 478	47	上海
479	用户 479	48	广州
480	用户 480	49	深圳
481	用户 481	50	北京
482	用户 482	51	上海
483	用户 483	52	广州
484	用户 484	53	深圳
485	用户 485	54	北京
486	用户 486	55	上海
487	用户 487	56	广州
488	用户 488	57	深圳
489	用户 489	58	北京
490	用户 490	59	上海
491	用户 491	60	广州
492	用户 492	61	深圳
493	用户 493	62	北京
494	用户 494	63	上海
495	用户 495	64	广州
496	用户 496	65	深圳
497	用户 497	66	北京
498	用户 498	67	上海
499	用户 499	68	广州
500	用户 500	69	深圳

当前排序: 无

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    virtual
    :height="300"
    border
    @sort-change="handleSortChange"
  />
  <div style="margin-top: 10px;">
    当前排序: {{ currentSort }}
  </div>
</template>

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

const currentSort = ref('无')

const columns = [
  { prop: 'id', label: 'ID', width: 80, sortable: true },
  { prop: 'name', label: '姓名', width: 120, sortable: true },
  { prop: 'age', label: '年龄', width: 80, sortable: true },
  { prop: 'city', label: '城市' },
]

const tableData = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  age: 20 + (i % 50),
  city: ['北京', '上海', '广州', '深圳'][i % 4],
}))

function handleSortChange(sort) {
  currentSort.value = sort.order === null ? '无' : `${sort.prop} ${sort.order === 'ascending' ? '升序' : '降序'}`
}
</script>

虚拟滚动 + 筛选

虚拟模式下支持列筛选功能。

ID	姓名	城市
1	用户 1	北京
2	用户 2	上海
3	用户 3	广州
4	用户 4	深圳
5	用户 5	北京
6	用户 6	上海
7	用户 7	广州
8	用户 8	深圳
9	用户 9	北京
10	用户 10	上海
11	用户 11	广州
12	用户 12	深圳
13	用户 13	北京
14	用户 14	上海
15	用户 15	广州
16	用户 16	深圳
17	用户 17	北京
18	用户 18	上海
19	用户 19	广州
20	用户 20	深圳
21	用户 21	北京
22	用户 22	上海
23	用户 23	广州
24	用户 24	深圳
25	用户 25	北京
26	用户 26	上海
27	用户 27	广州
28	用户 28	深圳
29	用户 29	北京
30	用户 30	上海
31	用户 31	广州
32	用户 32	深圳
33	用户 33	北京
34	用户 34	上海
35	用户 35	广州
36	用户 36	深圳
37	用户 37	北京
38	用户 38	上海
39	用户 39	广州
40	用户 40	深圳
41	用户 41	北京
42	用户 42	上海
43	用户 43	广州
44	用户 44	深圳
45	用户 45	北京
46	用户 46	上海
47	用户 47	广州
48	用户 48	深圳
49	用户 49	北京
50	用户 50	上海
51	用户 51	广州
52	用户 52	深圳
53	用户 53	北京
54	用户 54	上海
55	用户 55	广州
56	用户 56	深圳
57	用户 57	北京
58	用户 58	上海
59	用户 59	广州
60	用户 60	深圳
61	用户 61	北京
62	用户 62	上海
63	用户 63	广州
64	用户 64	深圳
65	用户 65	北京
66	用户 66	上海
67	用户 67	广州
68	用户 68	深圳
69	用户 69	北京
70	用户 70	上海
71	用户 71	广州
72	用户 72	深圳
73	用户 73	北京
74	用户 74	上海
75	用户 75	广州
76	用户 76	深圳
77	用户 77	北京
78	用户 78	上海
79	用户 79	广州
80	用户 80	深圳
81	用户 81	北京
82	用户 82	上海
83	用户 83	广州
84	用户 84	深圳
85	用户 85	北京
86	用户 86	上海
87	用户 87	广州
88	用户 88	深圳
89	用户 89	北京
90	用户 90	上海
91	用户 91	广州
92	用户 92	深圳
93	用户 93	北京
94	用户 94	上海
95	用户 95	广州
96	用户 96	深圳
97	用户 97	北京
98	用户 98	上海
99	用户 99	广州
100	用户 100	深圳
101	用户 101	北京
102	用户 102	上海
103	用户 103	广州
104	用户 104	深圳
105	用户 105	北京
106	用户 106	上海
107	用户 107	广州
108	用户 108	深圳
109	用户 109	北京
110	用户 110	上海
111	用户 111	广州
112	用户 112	深圳
113	用户 113	北京
114	用户 114	上海
115	用户 115	广州
116	用户 116	深圳
117	用户 117	北京
118	用户 118	上海
119	用户 119	广州
120	用户 120	深圳
121	用户 121	北京
122	用户 122	上海
123	用户 123	广州
124	用户 124	深圳
125	用户 125	北京
126	用户 126	上海
127	用户 127	广州
128	用户 128	深圳
129	用户 129	北京
130	用户 130	上海
131	用户 131	广州
132	用户 132	深圳
133	用户 133	北京
134	用户 134	上海
135	用户 135	广州
136	用户 136	深圳
137	用户 137	北京
138	用户 138	上海
139	用户 139	广州
140	用户 140	深圳
141	用户 141	北京
142	用户 142	上海
143	用户 143	广州
144	用户 144	深圳
145	用户 145	北京
146	用户 146	上海
147	用户 147	广州
148	用户 148	深圳
149	用户 149	北京
150	用户 150	上海
151	用户 151	广州
152	用户 152	深圳
153	用户 153	北京
154	用户 154	上海
155	用户 155	广州
156	用户 156	深圳
157	用户 157	北京
158	用户 158	上海
159	用户 159	广州
160	用户 160	深圳
161	用户 161	北京
162	用户 162	上海
163	用户 163	广州
164	用户 164	深圳
165	用户 165	北京
166	用户 166	上海
167	用户 167	广州
168	用户 168	深圳
169	用户 169	北京
170	用户 170	上海
171	用户 171	广州
172	用户 172	深圳
173	用户 173	北京
174	用户 174	上海
175	用户 175	广州
176	用户 176	深圳
177	用户 177	北京
178	用户 178	上海
179	用户 179	广州
180	用户 180	深圳
181	用户 181	北京
182	用户 182	上海
183	用户 183	广州
184	用户 184	深圳
185	用户 185	北京
186	用户 186	上海
187	用户 187	广州
188	用户 188	深圳
189	用户 189	北京
190	用户 190	上海
191	用户 191	广州
192	用户 192	深圳
193	用户 193	北京
194	用户 194	上海
195	用户 195	广州
196	用户 196	深圳
197	用户 197	北京
198	用户 198	上海
199	用户 199	广州
200	用户 200	深圳
201	用户 201	北京
202	用户 202	上海
203	用户 203	广州
204	用户 204	深圳
205	用户 205	北京
206	用户 206	上海
207	用户 207	广州
208	用户 208	深圳
209	用户 209	北京
210	用户 210	上海
211	用户 211	广州
212	用户 212	深圳
213	用户 213	北京
214	用户 214	上海
215	用户 215	广州
216	用户 216	深圳
217	用户 217	北京
218	用户 218	上海
219	用户 219	广州
220	用户 220	深圳
221	用户 221	北京
222	用户 222	上海
223	用户 223	广州
224	用户 224	深圳
225	用户 225	北京
226	用户 226	上海
227	用户 227	广州
228	用户 228	深圳
229	用户 229	北京
230	用户 230	上海
231	用户 231	广州
232	用户 232	深圳
233	用户 233	北京
234	用户 234	上海
235	用户 235	广州
236	用户 236	深圳
237	用户 237	北京
238	用户 238	上海
239	用户 239	广州
240	用户 240	深圳
241	用户 241	北京
242	用户 242	上海
243	用户 243	广州
244	用户 244	深圳
245	用户 245	北京
246	用户 246	上海
247	用户 247	广州
248	用户 248	深圳
249	用户 249	北京
250	用户 250	上海
251	用户 251	广州
252	用户 252	深圳
253	用户 253	北京
254	用户 254	上海
255	用户 255	广州
256	用户 256	深圳
257	用户 257	北京
258	用户 258	上海
259	用户 259	广州
260	用户 260	深圳
261	用户 261	北京
262	用户 262	上海
263	用户 263	广州
264	用户 264	深圳
265	用户 265	北京
266	用户 266	上海
267	用户 267	广州
268	用户 268	深圳
269	用户 269	北京
270	用户 270	上海
271	用户 271	广州
272	用户 272	深圳
273	用户 273	北京
274	用户 274	上海
275	用户 275	广州
276	用户 276	深圳
277	用户 277	北京
278	用户 278	上海
279	用户 279	广州
280	用户 280	深圳
281	用户 281	北京
282	用户 282	上海
283	用户 283	广州
284	用户 284	深圳
285	用户 285	北京
286	用户 286	上海
287	用户 287	广州
288	用户 288	深圳
289	用户 289	北京
290	用户 290	上海
291	用户 291	广州
292	用户 292	深圳
293	用户 293	北京
294	用户 294	上海
295	用户 295	广州
296	用户 296	深圳
297	用户 297	北京
298	用户 298	上海
299	用户 299	广州
300	用户 300	深圳
301	用户 301	北京
302	用户 302	上海
303	用户 303	广州
304	用户 304	深圳
305	用户 305	北京
306	用户 306	上海
307	用户 307	广州
308	用户 308	深圳
309	用户 309	北京
310	用户 310	上海
311	用户 311	广州
312	用户 312	深圳
313	用户 313	北京
314	用户 314	上海
315	用户 315	广州
316	用户 316	深圳
317	用户 317	北京
318	用户 318	上海
319	用户 319	广州
320	用户 320	深圳
321	用户 321	北京
322	用户 322	上海
323	用户 323	广州
324	用户 324	深圳
325	用户 325	北京
326	用户 326	上海
327	用户 327	广州
328	用户 328	深圳
329	用户 329	北京
330	用户 330	上海
331	用户 331	广州
332	用户 332	深圳
333	用户 333	北京
334	用户 334	上海
335	用户 335	广州
336	用户 336	深圳
337	用户 337	北京
338	用户 338	上海
339	用户 339	广州
340	用户 340	深圳
341	用户 341	北京
342	用户 342	上海
343	用户 343	广州
344	用户 344	深圳
345	用户 345	北京
346	用户 346	上海
347	用户 347	广州
348	用户 348	深圳
349	用户 349	北京
350	用户 350	上海
351	用户 351	广州
352	用户 352	深圳
353	用户 353	北京
354	用户 354	上海
355	用户 355	广州
356	用户 356	深圳
357	用户 357	北京
358	用户 358	上海
359	用户 359	广州
360	用户 360	深圳
361	用户 361	北京
362	用户 362	上海
363	用户 363	广州
364	用户 364	深圳
365	用户 365	北京
366	用户 366	上海
367	用户 367	广州
368	用户 368	深圳
369	用户 369	北京
370	用户 370	上海
371	用户 371	广州
372	用户 372	深圳
373	用户 373	北京
374	用户 374	上海
375	用户 375	广州
376	用户 376	深圳
377	用户 377	北京
378	用户 378	上海
379	用户 379	广州
380	用户 380	深圳
381	用户 381	北京
382	用户 382	上海
383	用户 383	广州
384	用户 384	深圳
385	用户 385	北京
386	用户 386	上海
387	用户 387	广州
388	用户 388	深圳
389	用户 389	北京
390	用户 390	上海
391	用户 391	广州
392	用户 392	深圳
393	用户 393	北京
394	用户 394	上海
395	用户 395	广州
396	用户 396	深圳
397	用户 397	北京
398	用户 398	上海
399	用户 399	广州
400	用户 400	深圳
401	用户 401	北京
402	用户 402	上海
403	用户 403	广州
404	用户 404	深圳
405	用户 405	北京
406	用户 406	上海
407	用户 407	广州
408	用户 408	深圳
409	用户 409	北京
410	用户 410	上海
411	用户 411	广州
412	用户 412	深圳
413	用户 413	北京
414	用户 414	上海
415	用户 415	广州
416	用户 416	深圳
417	用户 417	北京
418	用户 418	上海
419	用户 419	广州
420	用户 420	深圳
421	用户 421	北京
422	用户 422	上海
423	用户 423	广州
424	用户 424	深圳
425	用户 425	北京
426	用户 426	上海
427	用户 427	广州
428	用户 428	深圳
429	用户 429	北京
430	用户 430	上海
431	用户 431	广州
432	用户 432	深圳
433	用户 433	北京
434	用户 434	上海
435	用户 435	广州
436	用户 436	深圳
437	用户 437	北京
438	用户 438	上海
439	用户 439	广州
440	用户 440	深圳
441	用户 441	北京
442	用户 442	上海
443	用户 443	广州
444	用户 444	深圳
445	用户 445	北京
446	用户 446	上海
447	用户 447	广州
448	用户 448	深圳
449	用户 449	北京
450	用户 450	上海
451	用户 451	广州
452	用户 452	深圳
453	用户 453	北京
454	用户 454	上海
455	用户 455	广州
456	用户 456	深圳
457	用户 457	北京
458	用户 458	上海
459	用户 459	广州
460	用户 460	深圳
461	用户 461	北京
462	用户 462	上海
463	用户 463	广州
464	用户 464	深圳
465	用户 465	北京
466	用户 466	上海
467	用户 467	广州
468	用户 468	深圳
469	用户 469	北京
470	用户 470	上海
471	用户 471	广州
472	用户 472	深圳
473	用户 473	北京
474	用户 474	上海
475	用户 475	广州
476	用户 476	深圳
477	用户 477	北京
478	用户 478	上海
479	用户 479	广州
480	用户 480	深圳
481	用户 481	北京
482	用户 482	上海
483	用户 483	广州
484	用户 484	深圳
485	用户 485	北京
486	用户 486	上海
487	用户 487	广州
488	用户 488	深圳
489	用户 489	北京
490	用户 490	上海
491	用户 491	广州
492	用户 492	深圳
493	用户 493	北京
494	用户 494	上海
495	用户 495	广州
496	用户 496	深圳
497	用户 497	北京
498	用户 498	上海
499	用户 499	广州
500	用户 500	深圳

当前筛选: 无

<template>
  <ZcTable
    :data="tableData"
    :columns="columns"
    virtual
    :height="300"
    border
    @filter-change="handleFilterChange"
  />
  <div style="margin-top: 10px;">
    当前筛选: {{ currentFilter }}
  </div>
</template>

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

const currentFilter = ref('无')

const columns = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  {
    prop: 'city',
    label: '城市',
    filterable: true,
    filters: [
      { text: '北京', value: '北京' },
      { text: '上海', value: '上海' },
      { text: '广州', value: '广州' },
      { text: '深圳', value: '深圳' },
    ],
  },
]

const tableData = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  city: ['北京', '上海', '广州', '深圳'][i % 4],
}))

function handleFilterChange(filters) {
  const cityFilter = filters.city || []
  currentFilter.value = cityFilter.length > 0 ? `城市: ${cityFilter.join(', ')}` : '无'
}
</script>

虚拟滚动 + 选择

虚拟模式下支持行选择功能。

	ID	姓名	年龄
	1	用户 1	20
	2	用户 2	21
	3	用户 3	22
	4	用户 4	23
	5	用户 5	24
	6	用户 6	25
	7	用户 7	26
	8	用户 8	27
	9	用户 9	28
	10	用户 10	29
	11	用户 11	30
	12	用户 12	31
	13	用户 13	32
	14	用户 14	33
	15	用户 15	34
	16	用户 16	35
	17	用户 17	36
	18	用户 18	37
	19	用户 19	38
	20	用户 20	39
	21	用户 21	40
	22	用户 22	41
	23	用户 23	42
	24	用户 24	43
	25	用户 25	44
	26	用户 26	45
	27	用户 27	46
	28	用户 28	47
	29	用户 29	48
	30	用户 30	49
	31	用户 31	50
	32	用户 32	51
	33	用户 33	52
	34	用户 34	53
	35	用户 35	54
	36	用户 36	55
	37	用户 37	56
	38	用户 38	57
	39	用户 39	58
	40	用户 40	59
	41	用户 41	60
	42	用户 42	61
	43	用户 43	62
	44	用户 44	63
	45	用户 45	64
	46	用户 46	65
	47	用户 47	66
	48	用户 48	67
	49	用户 49	68
	50	用户 50	69
	51	用户 51	20
	52	用户 52	21
	53	用户 53	22
	54	用户 54	23
	55	用户 55	24
	56	用户 56	25
	57	用户 57	26
	58	用户 58	27
	59	用户 59	28
	60	用户 60	29
	61	用户 61	30
	62	用户 62	31
	63	用户 63	32
	64	用户 64	33
	65	用户 65	34
	66	用户 66	35
	67	用户 67	36
	68	用户 68	37
	69	用户 69	38
	70	用户 70	39
	71	用户 71	40
	72	用户 72	41
	73	用户 73	42
	74	用户 74	43
	75	用户 75	44
	76	用户 76	45
	77	用户 77	46
	78	用户 78	47
	79	用户 79	48
	80	用户 80	49
	81	用户 81	50
	82	用户 82	51
	83	用户 83	52
	84	用户 84	53
	85	用户 85	54
	86	用户 86	55
	87	用户 87	56
	88	用户 88	57
	89	用户 89	58
	90	用户 90	59
	91	用户 91	60
	92	用户 92	61
	93	用户 93	62
	94	用户 94	63
	95	用户 95	64
	96	用户 96	65
	97	用户 97	66
	98	用户 98	67
	99	用户 99	68
	100	用户 100	69
	101	用户 101	20
	102	用户 102	21
	103	用户 103	22
	104	用户 104	23
	105	用户 105	24
	106	用户 106	25
	107	用户 107	26
	108	用户 108	27
	109	用户 109	28
	110	用户 110	29
	111	用户 111	30
	112	用户 112	31
	113	用户 113	32
	114	用户 114	33
	115	用户 115	34
	116	用户 116	35
	117	用户 117	36
	118	用户 118	37
	119	用户 119	38
	120	用户 120	39
	121	用户 121	40
	122	用户 122	41
	123	用户 123	42
	124	用户 124	43
	125	用户 125	44
	126	用户 126	45
	127	用户 127	46
	128	用户 128	47
	129	用户 129	48
	130	用户 130	49
	131	用户 131	50
	132	用户 132	51
	133	用户 133	52
	134	用户 134	53
	135	用户 135	54
	136	用户 136	55
	137	用户 137	56
	138	用户 138	57
	139	用户 139	58
	140	用户 140	59
	141	用户 141	60
	142	用户 142	61
	143	用户 143	62
	144	用户 144	63
	145	用户 145	64
	146	用户 146	65
	147	用户 147	66
	148	用户 148	67
	149	用户 149	68
	150	用户 150	69
	151	用户 151	20
	152	用户 152	21
	153	用户 153	22
	154	用户 154	23
	155	用户 155	24
	156	用户 156	25
	157	用户 157	26
	158	用户 158	27
	159	用户 159	28
	160	用户 160	29
	161	用户 161	30
	162	用户 162	31
	163	用户 163	32
	164	用户 164	33
	165	用户 165	34
	166	用户 166	35
	167	用户 167	36
	168	用户 168	37
	169	用户 169	38
	170	用户 170	39
	171	用户 171	40
	172	用户 172	41
	173	用户 173	42
	174	用户 174	43
	175	用户 175	44
	176	用户 176	45
	177	用户 177	46
	178	用户 178	47
	179	用户 179	48
	180	用户 180	49
	181	用户 181	50
	182	用户 182	51
	183	用户 183	52
	184	用户 184	53
	185	用户 185	54
	186	用户 186	55
	187	用户 187	56
	188	用户 188	57
	189	用户 189	58
	190	用户 190	59
	191	用户 191	60
	192	用户 192	61
	193	用户 193	62
	194	用户 194	63
	195	用户 195	64
	196	用户 196	65
	197	用户 197	66
	198	用户 198	67
	199	用户 199	68
	200	用户 200	69
	201	用户 201	20
	202	用户 202	21
	203	用户 203	22
	204	用户 204	23
	205	用户 205	24
	206	用户 206	25
	207	用户 207	26
	208	用户 208	27
	209	用户 209	28
	210	用户 210	29
	211	用户 211	30
	212	用户 212	31
	213	用户 213	32
	214	用户 214	33
	215	用户 215	34
	216	用户 216	35
	217	用户 217	36
	218	用户 218	37
	219	用户 219	38
	220	用户 220	39
	221	用户 221	40
	222	用户 222	41
	223	用户 223	42
	224	用户 224	43
	225	用户 225	44
	226	用户 226	45
	227	用户 227	46
	228	用户 228	47
	229	用户 229	48
	230	用户 230	49
	231	用户 231	50
	232	用户 232	51
	233	用户 233	52
	234	用户 234	53
	235	用户 235	54
	236	用户 236	55
	237	用户 237	56
	238	用户 238	57
	239	用户 239	58
	240	用户 240	59
	241	用户 241	60
	242	用户 242	61
	243	用户 243	62
	244	用户 244	63
	245	用户 245	64
	246	用户 246	65
	247	用户 247	66
	248	用户 248	67
	249	用户 249	68
	250	用户 250	69
	251	用户 251	20
	252	用户 252	21
	253	用户 253	22
	254	用户 254	23
	255	用户 255	24
	256	用户 256	25
	257	用户 257	26
	258	用户 258	27
	259	用户 259	28
	260	用户 260	29
	261	用户 261	30
	262	用户 262	31
	263	用户 263	32
	264	用户 264	33
	265	用户 265	34
	266	用户 266	35
	267	用户 267	36
	268	用户 268	37
	269	用户 269	38
	270	用户 270	39
	271	用户 271	40
	272	用户 272	41
	273	用户 273	42
	274	用户 274	43
	275	用户 275	44
	276	用户 276	45
	277	用户 277	46
	278	用户 278	47
	279	用户 279	48
	280	用户 280	49
	281	用户 281	50
	282	用户 282	51
	283	用户 283	52
	284	用户 284	53
	285	用户 285	54
	286	用户 286	55
	287	用户 287	56
	288	用户 288	57
	289	用户 289	58
	290	用户 290	59
	291	用户 291	60
	292	用户 292	61
	293	用户 293	62
	294	用户 294	63
	295	用户 295	64
	296	用户 296	65
	297	用户 297	66
	298	用户 298	67
	299	用户 299	68
	300	用户 300	69
	301	用户 301	20
	302	用户 302	21
	303	用户 303	22
	304	用户 304	23
	305	用户 305	24
	306	用户 306	25
	307	用户 307	26
	308	用户 308	27
	309	用户 309	28
	310	用户 310	29
	311	用户 311	30
	312	用户 312	31
	313	用户 313	32
	314	用户 314	33
	315	用户 315	34
	316	用户 316	35
	317	用户 317	36
	318	用户 318	37
	319	用户 319	38
	320	用户 320	39
	321	用户 321	40
	322	用户 322	41
	323	用户 323	42
	324	用户 324	43
	325	用户 325	44
	326	用户 326	45
	327	用户 327	46
	328	用户 328	47
	329	用户 329	48
	330	用户 330	49
	331	用户 331	50
	332	用户 332	51
	333	用户 333	52
	334	用户 334	53
	335	用户 335	54
	336	用户 336	55
	337	用户 337	56
	338	用户 338	57
	339	用户 339	58
	340	用户 340	59
	341	用户 341	60
	342	用户 342	61
	343	用户 343	62
	344	用户 344	63
	345	用户 345	64
	346	用户 346	65
	347	用户 347	66
	348	用户 348	67
	349	用户 349	68
	350	用户 350	69
	351	用户 351	20
	352	用户 352	21
	353	用户 353	22
	354	用户 354	23
	355	用户 355	24
	356	用户 356	25
	357	用户 357	26
	358	用户 358	27
	359	用户 359	28
	360	用户 360	29
	361	用户 361	30
	362	用户 362	31
	363	用户 363	32
	364	用户 364	33
	365	用户 365	34
	366	用户 366	35
	367	用户 367	36
	368	用户 368	37
	369	用户 369	38
	370	用户 370	39
	371	用户 371	40
	372	用户 372	41
	373	用户 373	42
	374	用户 374	43
	375	用户 375	44
	376	用户 376	45
	377	用户 377	46
	378	用户 378	47
	379	用户 379	48
	380	用户 380	49
	381	用户 381	50
	382	用户 382	51
	383	用户 383	52
	384	用户 384	53
	385	用户 385	54
	386	用户 386	55
	387	用户 387	56
	388	用户 388	57
	389	用户 389	58
	390	用户 390	59
	391	用户 391	60
	392	用户 392	61
	393	用户 393	62
	394	用户 394	63
	395	用户 395	64
	396	用户 396	65
	397	用户 397	66
	398	用户 398	67
	399	用户 399	68
	400	用户 400	69
	401	用户 401	20
	402	用户 402	21
	403	用户 403	22
	404	用户 404	23
	405	用户 405	24
	406	用户 406	25
	407	用户 407	26
	408	用户 408	27
	409	用户 409	28
	410	用户 410	29
	411	用户 411	30
	412	用户 412	31
	413	用户 413	32
	414	用户 414	33
	415	用户 415	34
	416	用户 416	35
	417	用户 417	36
	418	用户 418	37
	419	用户 419	38
	420	用户 420	39
	421	用户 421	40
	422	用户 422	41
	423	用户 423	42
	424	用户 424	43
	425	用户 425	44
	426	用户 426	45
	427	用户 427	46
	428	用户 428	47
	429	用户 429	48
	430	用户 430	49
	431	用户 431	50
	432	用户 432	51
	433	用户 433	52
	434	用户 434	53
	435	用户 435	54
	436	用户 436	55
	437	用户 437	56
	438	用户 438	57
	439	用户 439	58
	440	用户 440	59
	441	用户 441	60
	442	用户 442	61
	443	用户 443	62
	444	用户 444	63
	445	用户 445	64
	446	用户 446	65
	447	用户 447	66
	448	用户 448	67
	449	用户 449	68
	450	用户 450	69
	451	用户 451	20
	452	用户 452	21
	453	用户 453	22
	454	用户 454	23
	455	用户 455	24
	456	用户 456	25
	457	用户 457	26
	458	用户 458	27
	459	用户 459	28
	460	用户 460	29
	461	用户 461	30
	462	用户 462	31
	463	用户 463	32
	464	用户 464	33
	465	用户 465	34
	466	用户 466	35
	467	用户 467	36
	468	用户 468	37
	469	用户 469	38
	470	用户 470	39
	471	用户 471	40
	472	用户 472	41
	473	用户 473	42
	474	用户 474	43
	475	用户 475	44
	476	用户 476	45
	477	用户 477	46
	478	用户 478	47
	479	用户 479	48
	480	用户 480	49
	481	用户 481	50
	482	用户 482	51
	483	用户 483	52
	484	用户 484	53
	485	用户 485	54
	486	用户 486	55
	487	用户 487	56
	488	用户 488	57
	489	用户 489	58
	490	用户 490	59
	491	用户 491	60
	492	用户 492	61
	493	用户 493	62
	494	用户 494	63
	495	用户 495	64
	496	用户 496	65
	497	用户 497	66
	498	用户 498	67
	499	用户 499	68
	500	用户 500	69

已选择: 0 条数据

<template>
  <ZcTable
    ref="tableRef"
    :data="tableData"
    :columns="columns"
    virtual
    :height="300"
    border
    selectable
    @selection-change="handleSelectionChange"
  />
  <div style="margin-top: 10px;">
    已选择: {{ selectedCount }} 条数据
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const tableRef = ref()
const selectedRows = ref([])

const selectedCount = computed(() => selectedRows.value.length)

const columns = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
]

const tableData = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  age: 20 + (i % 50),
}))

function handleSelectionChange(selection) {
  selectedRows.value = selection
  console.log('选中行:', selection)
}
</script>

virtualScrollTo 方法

使用 virtualScrollTo 方法滚动到指定行。

ID	姓名	数值
1	用户 1	8689
2	用户 2	7027
3	用户 3	3306
4	用户 4	88
5	用户 5	8336
6	用户 6	7135
7	用户 7	5971
8	用户 8	4799
9	用户 9	9101
10	用户 10	8829
11	用户 11	3225
12	用户 12	3250
13	用户 13	6856
14	用户 14	5574
15	用户 15	3384
16	用户 16	1692
17	用户 17	6949
18	用户 18	3642
19	用户 19	6867
20	用户 20	4431
21	用户 21	3883
22	用户 22	5065
23	用户 23	283
24	用户 24	271
25	用户 25	1764
26	用户 26	1841
27	用户 27	2966
28	用户 28	3984
29	用户 29	8033
30	用户 30	160
31	用户 31	7315
32	用户 32	4265
33	用户 33	9818
34	用户 34	8456
35	用户 35	7284
36	用户 36	9914
37	用户 37	125
38	用户 38	8570
39	用户 39	3581
40	用户 40	2165
41	用户 41	466
42	用户 42	1326
43	用户 43	6138
44	用户 44	1456
45	用户 45	8923
46	用户 46	2312
47	用户 47	5340
48	用户 48	6893
49	用户 49	1407
50	用户 50	5106
51	用户 51	1384
52	用户 52	4183
53	用户 53	1356
54	用户 54	2609
55	用户 55	5570
56	用户 56	5921
57	用户 57	8961
58	用户 58	817
59	用户 59	9036
60	用户 60	8387
61	用户 61	2774
62	用户 62	8675
63	用户 63	716
64	用户 64	246
65	用户 65	626
66	用户 66	7851
67	用户 67	3747
68	用户 68	2558
69	用户 69	1217
70	用户 70	3410
71	用户 71	1507
72	用户 72	1623
73	用户 73	6107
74	用户 74	144
75	用户 75	2322
76	用户 76	9138
77	用户 77	1022
78	用户 78	6794
79	用户 79	2371
80	用户 80	962
81	用户 81	831
82	用户 82	2664
83	用户 83	9774
84	用户 84	3707
85	用户 85	8459
86	用户 86	1122
87	用户 87	5825
88	用户 88	4279
89	用户 89	9928
90	用户 90	2736
91	用户 91	1205
92	用户 92	9517
93	用户 93	6863
94	用户 94	2869
95	用户 95	1495
96	用户 96	1965
97	用户 97	8018
98	用户 98	9663
99	用户 99	9816
100	用户 100	731
101	用户 101	2116
102	用户 102	4672
103	用户 103	732
104	用户 104	1178
105	用户 105	6958
106	用户 106	8851
107	用户 107	9402
108	用户 108	4783
109	用户 109	9264
110	用户 110	894
111	用户 111	8886
112	用户 112	4156
113	用户 113	8953
114	用户 114	5039
115	用户 115	4046
116	用户 116	6642
117	用户 117	5367
118	用户 118	5542
119	用户 119	22
120	用户 120	2706
121	用户 121	3987
122	用户 122	5346
123	用户 123	3910
124	用户 124	2863
125	用户 125	2959
126	用户 126	5144
127	用户 127	2487
128	用户 128	843
129	用户 129	6333
130	用户 130	1037
131	用户 131	7165
132	用户 132	8431
133	用户 133	8017
134	用户 134	3984
135	用户 135	6048
136	用户 136	852
137	用户 137	5645
138	用户 138	8946
139	用户 139	8948
140	用户 140	8197
141	用户 141	3196
142	用户 142	2488
143	用户 143	5494
144	用户 144	1907
145	用户 145	4999
146	用户 146	9452
147	用户 147	2004
148	用户 148	4290
149	用户 149	1444
150	用户 150	3327
151	用户 151	6768
152	用户 152	9198
153	用户 153	6974
154	用户 154	2197
155	用户 155	410
156	用户 156	2790
157	用户 157	4529
158	用户 158	1581
159	用户 159	5976
160	用户 160	5789
161	用户 161	5599
162	用户 162	505
163	用户 163	8144
164	用户 164	8511
165	用户 165	6420
166	用户 166	333
167	用户 167	3788
168	用户 168	2382
169	用户 169	2249
170	用户 170	5719
171	用户 171	4843
172	用户 172	6741
173	用户 173	7574
174	用户 174	8834
175	用户 175	6326
176	用户 176	4721
177	用户 177	7592
178	用户 178	207
179	用户 179	3629
180	用户 180	4806
181	用户 181	9997
182	用户 182	9690
183	用户 183	5715
184	用户 184	6437
185	用户 185	5344
186	用户 186	65
187	用户 187	948
188	用户 188	4972
189	用户 189	7678
190	用户 190	2677
191	用户 191	941
192	用户 192	8068
193	用户 193	4985
194	用户 194	7667
195	用户 195	5286
196	用户 196	378
197	用户 197	7481
198	用户 198	9042
199	用户 199	7364
200	用户 200	9342
201	用户 201	607
202	用户 202	7114
203	用户 203	3931
204	用户 204	1334
205	用户 205	5586
206	用户 206	1732
207	用户 207	7131
208	用户 208	2673
209	用户 209	8714
210	用户 210	3879
211	用户 211	6583
212	用户 212	8263
213	用户 213	6559
214	用户 214	7539
215	用户 215	9663
216	用户 216	4465
217	用户 217	8323
218	用户 218	914
219	用户 219	2438
220	用户 220	3250
221	用户 221	5852
222	用户 222	527
223	用户 223	946
224	用户 224	6569
225	用户 225	6409
226	用户 226	803
227	用户 227	4559
228	用户 228	7469
229	用户 229	6064
230	用户 230	8549
231	用户 231	4247
232	用户 232	6227
233	用户 233	4478
234	用户 234	3807
235	用户 235	4378
236	用户 236	7573
237	用户 237	9484
238	用户 238	953
239	用户 239	4546
240	用户 240	7759
241	用户 241	4284
242	用户 242	5820
243	用户 243	6914
244	用户 244	1688
245	用户 245	1741
246	用户 246	9955
247	用户 247	3098
248	用户 248	3238
249	用户 249	5806
250	用户 250	9151
251	用户 251	5454
252	用户 252	8056
253	用户 253	4789
254	用户 254	4172
255	用户 255	9110
256	用户 256	1204
257	用户 257	3202
258	用户 258	6807
259	用户 259	9968
260	用户 260	54
261	用户 261	8291
262	用户 262	250
263	用户 263	5849
264	用户 264	9885
265	用户 265	1917
266	用户 266	5800
267	用户 267	1045
268	用户 268	1219
269	用户 269	299
270	用户 270	2639
271	用户 271	3991
272	用户 272	1422
273	用户 273	9663
274	用户 274	827
275	用户 275	2534
276	用户 276	2375
277	用户 277	9523
278	用户 278	2427
279	用户 279	2638
280	用户 280	4722
281	用户 281	3954
282	用户 282	1045
283	用户 283	9738
284	用户 284	5648
285	用户 285	7789
286	用户 286	717
287	用户 287	7459
288	用户 288	7171
289	用户 289	2453
290	用户 290	8287
291	用户 291	2804
292	用户 292	4846
293	用户 293	8504
294	用户 294	6664
295	用户 295	6843
296	用户 296	5761
297	用户 297	5525
298	用户 298	3885
299	用户 299	7024
300	用户 300	5086
301	用户 301	76
302	用户 302	5407
303	用户 303	6288
304	用户 304	546
305	用户 305	5342
306	用户 306	779
307	用户 307	3006
308	用户 308	1704
309	用户 309	2398
310	用户 310	9665
311	用户 311	1720
312	用户 312	602
313	用户 313	5617
314	用户 314	3033
315	用户 315	8388
316	用户 316	3021
317	用户 317	8881
318	用户 318	6091
319	用户 319	892
320	用户 320	4960
321	用户 321	7492
322	用户 322	1882
323	用户 323	2344
324	用户 324	7280
325	用户 325	8285
326	用户 326	9381
327	用户 327	2661
328	用户 328	4829
329	用户 329	3472
330	用户 330	1053
331	用户 331	1588
332	用户 332	4692
333	用户 333	8484
334	用户 334	1163
335	用户 335	394
336	用户 336	3357
337	用户 337	7989
338	用户 338	9181
339	用户 339	9675
340	用户 340	9468
341	用户 341	6648
342	用户 342	1446
343	用户 343	4801
344	用户 344	5711
345	用户 345	8645
346	用户 346	8278
347	用户 347	5832
348	用户 348	2475
349	用户 349	8062
350	用户 350	6846
351	用户 351	7576
352	用户 352	3701
353	用户 353	1508
354	用户 354	8732
355	用户 355	7625
356	用户 356	3552
357	用户 357	8456
358	用户 358	271
359	用户 359	7327
360	用户 360	5374
361	用户 361	2950
362	用户 362	4287
363	用户 363	5092
364	用户 364	2827
365	用户 365	6066
366	用户 366	1903
367	用户 367	3297
368	用户 368	7320
369	用户 369	1067
370	用户 370	2534
371	用户 371	7023
372	用户 372	2615
373	用户 373	3544
374	用户 374	9368
375	用户 375	947
376	用户 376	1431
377	用户 377	9997
378	用户 378	301
379	用户 379	3608
380	用户 380	5600
381	用户 381	6094
382	用户 382	8353
383	用户 383	6
384	用户 384	4530
385	用户 385	8348
386	用户 386	421
387	用户 387	8228
388	用户 388	4557
389	用户 389	7798
390	用户 390	6559
391	用户 391	9211
392	用户 392	3472
393	用户 393	7690
394	用户 394	5415
395	用户 395	2100
396	用户 396	3643
397	用户 397	8977
398	用户 398	3561
399	用户 399	8885
400	用户 400	2133
401	用户 401	3712
402	用户 402	5331
403	用户 403	8616
404	用户 404	2859
405	用户 405	232
406	用户 406	3593
407	用户 407	5135
408	用户 408	3584
409	用户 409	8340
410	用户 410	4831
411	用户 411	1165
412	用户 412	2779
413	用户 413	9364
414	用户 414	324
415	用户 415	3229
416	用户 416	7294
417	用户 417	8151
418	用户 418	5405
419	用户 419	3707
420	用户 420	2010
421	用户 421	9733
422	用户 422	4772
423	用户 423	4923
424	用户 424	8767
425	用户 425	3236
426	用户 426	6831
427	用户 427	5380
428	用户 428	4860
429	用户 429	2723
430	用户 430	4611
431	用户 431	568
432	用户 432	8333
433	用户 433	9584
434	用户 434	5168
435	用户 435	4651
436	用户 436	3360
437	用户 437	1920
438	用户 438	2017
439	用户 439	9995
440	用户 440	2836
441	用户 441	478
442	用户 442	4646
443	用户 443	4308
444	用户 444	3598
445	用户 445	7467
446	用户 446	2348
447	用户 447	9350
448	用户 448	3287
449	用户 449	7267
450	用户 450	8485
451	用户 451	6790
452	用户 452	24
453	用户 453	9227
454	用户 454	563
455	用户 455	3908
456	用户 456	5126
457	用户 457	1237
458	用户 458	7634
459	用户 459	3195
460	用户 460	879
461	用户 461	8613
462	用户 462	5518
463	用户 463	5985
464	用户 464	6357
465	用户 465	7504
466	用户 466	4426
467	用户 467	3828
468	用户 468	1781
469	用户 469	9079
470	用户 470	7453
471	用户 471	6049
472	用户 472	7732
473	用户 473	4341
474	用户 474	3927
475	用户 475	8572
476	用户 476	9178
477	用户 477	9916
478	用户 478	4903
479	用户 479	2821
480	用户 480	7530
481	用户 481	3687
482	用户 482	9048
483	用户 483	2095
484	用户 484	8181
485	用户 485	1550
486	用户 486	2037
487	用户 487	5427
488	用户 488	1707
489	用户 489	3421
490	用户 490	8327
491	用户 491	2076
492	用户 492	6345
493	用户 493	3897
494	用户 494	7070
495	用户 495	5511
496	用户 496	3617
497	用户 497	2303
498	用户 498	3646
499	用户 499	8849
500	用户 500	2238
501	用户 501	7432
502	用户 502	6078
503	用户 503	5949
504	用户 504	5518
505	用户 505	3225
506	用户 506	1778
507	用户 507	8950
508	用户 508	460
509	用户 509	7142
510	用户 510	8022
511	用户 511	6698
512	用户 512	5429
513	用户 513	6811
514	用户 514	3687
515	用户 515	1523
516	用户 516	3423
517	用户 517	2446
518	用户 518	4728
519	用户 519	6386
520	用户 520	5673
521	用户 521	5179
522	用户 522	7133
523	用户 523	3869
524	用户 524	775
525	用户 525	6256
526	用户 526	3477
527	用户 527	8935
528	用户 528	8830
529	用户 529	2888
530	用户 530	1857
531	用户 531	3242
532	用户 532	3263
533	用户 533	6587
534	用户 534	2325
535	用户 535	3228
536	用户 536	6977
537	用户 537	4062
538	用户 538	3309
539	用户 539	5970
540	用户 540	6015
541	用户 541	5642
542	用户 542	8991
543	用户 543	4572
544	用户 544	3187
545	用户 545	3979
546	用户 546	5502
547	用户 547	7584
548	用户 548	5774
549	用户 549	8312
550	用户 550	9132
551	用户 551	9337
552	用户 552	2036
553	用户 553	8419
554	用户 554	7894
555	用户 555	8472
556	用户 556	6587
557	用户 557	7134
558	用户 558	638
559	用户 559	5045
560	用户 560	9507
561	用户 561	1461
562	用户 562	7340
563	用户 563	9732
564	用户 564	8820
565	用户 565	6279
566	用户 566	9708
567	用户 567	6503
568	用户 568	7325
569	用户 569	7919
570	用户 570	3972
571	用户 571	6124
572	用户 572	2721
573	用户 573	6495
574	用户 574	7162
575	用户 575	518
576	用户 576	6942
577	用户 577	9319
578	用户 578	4518
579	用户 579	895
580	用户 580	1061
581	用户 581	7235
582	用户 582	5292
583	用户 583	5589
584	用户 584	9833
585	用户 585	1298
586	用户 586	9850
587	用户 587	4650
588	用户 588	6248
589	用户 589	1718
590	用户 590	3486
591	用户 591	7921
592	用户 592	9149
593	用户 593	4509
594	用户 594	9390
595	用户 595	2363
596	用户 596	9094
597	用户 597	3233
598	用户 598	6280
599	用户 599	7638
600	用户 600	3972
601	用户 601	4548
602	用户 602	2295
603	用户 603	1132
604	用户 604	495
605	用户 605	1891
606	用户 606	4176
607	用户 607	3989
608	用户 608	4836
609	用户 609	6358
610	用户 610	1226
611	用户 611	858
612	用户 612	2807
613	用户 613	1011
614	用户 614	8811
615	用户 615	7431
616	用户 616	1922
617	用户 617	4184
618	用户 618	2325
619	用户 619	1153
620	用户 620	3101
621	用户 621	8591
622	用户 622	5680
623	用户 623	6927
624	用户 624	3129
625	用户 625	9429
626	用户 626	387
627	用户 627	596
628	用户 628	2890
629	用户 629	8480
630	用户 630	4654
631	用户 631	3553
632	用户 632	9190
633	用户 633	1275
634	用户 634	3660
635	用户 635	2883
636	用户 636	7785
637	用户 637	8953
638	用户 638	579
639	用户 639	3316
640	用户 640	2076
641	用户 641	9750
642	用户 642	1465
643	用户 643	6931
644	用户 644	3776
645	用户 645	7644
646	用户 646	4591
647	用户 647	5309
648	用户 648	7517
649	用户 649	3726
650	用户 650	7490
651	用户 651	4363
652	用户 652	4307
653	用户 653	1813
654	用户 654	7716
655	用户 655	2171
656	用户 656	1666
657	用户 657	735
658	用户 658	5436
659	用户 659	8443
660	用户 660	9064
661	用户 661	7748
662	用户 662	8389
663	用户 663	8097
664	用户 664	8537
665	用户 665	5880
666	用户 666	8419
667	用户 667	9933
668	用户 668	611
669	用户 669	1444
670	用户 670	1298
671	用户 671	6843
672	用户 672	4338
673	用户 673	3547
674	用户 674	8269
675	用户 675	5422
676	用户 676	5633
677	用户 677	9074
678	用户 678	4567
679	用户 679	763
680	用户 680	3559
681	用户 681	4773
682	用户 682	817
683	用户 683	6081
684	用户 684	3857
685	用户 685	4655
686	用户 686	441
687	用户 687	1729
688	用户 688	4849
689	用户 689	191
690	用户 690	405
691	用户 691	6794
692	用户 692	1797
693	用户 693	7899
694	用户 694	386
695	用户 695	8183
696	用户 696	6308
697	用户 697	8496
698	用户 698	1964
699	用户 699	4621
700	用户 700	3609
701	用户 701	695
702	用户 702	7050
703	用户 703	154
704	用户 704	6570
705	用户 705	4633
706	用户 706	3421
707	用户 707	3172
708	用户 708	4448
709	用户 709	3717
710	用户 710	9326
711	用户 711	8092
712	用户 712	2590
713	用户 713	7701
714	用户 714	369
715	用户 715	3698
716	用户 716	4958
717	用户 717	5768
718	用户 718	3110
719	用户 719	6427
720	用户 720	1948
721	用户 721	3819
722	用户 722	6710
723	用户 723	6206
724	用户 724	3559
725	用户 725	7134
726	用户 726	9862
727	用户 727	1848
728	用户 728	3509
729	用户 729	8166
730	用户 730	5156
731	用户 731	4576
732	用户 732	4721
733	用户 733	3458
734	用户 734	8511
735	用户 735	6543
736	用户 736	4718
737	用户 737	931
738	用户 738	8620
739	用户 739	9524
740	用户 740	3870
741	用户 741	559
742	用户 742	7394
743	用户 743	9418
744	用户 744	4818
745	用户 745	2493
746	用户 746	5257
747	用户 747	5204
748	用户 748	9347
749	用户 749	6736
750	用户 750	3467
751	用户 751	2002
752	用户 752	820
753	用户 753	4699
754	用户 754	5470
755	用户 755	7909
756	用户 756	135
757	用户 757	6371
758	用户 758	9185
759	用户 759	9875
760	用户 760	6171
761	用户 761	4882
762	用户 762	7972
763	用户 763	5729
764	用户 764	3079
765	用户 765	3463
766	用户 766	5543
767	用户 767	3266
768	用户 768	4728
769	用户 769	8711
770	用户 770	7912
771	用户 771	305
772	用户 772	1229
773	用户 773	4317
774	用户 774	3206
775	用户 775	4124
776	用户 776	9468
777	用户 777	8791
778	用户 778	9181
779	用户 779	7890
780	用户 780	570
781	用户 781	9415
782	用户 782	43
783	用户 783	6051
784	用户 784	8491
785	用户 785	3174
786	用户 786	1744
787	用户 787	504
788	用户 788	3881
789	用户 789	9366
790	用户 790	2500
791	用户 791	5100
792	用户 792	8303
793	用户 793	9268
794	用户 794	3659
795	用户 795	116
796	用户 796	2712
797	用户 797	910
798	用户 798	2779
799	用户 799	7225
800	用户 800	7995
801	用户 801	7320
802	用户 802	5144
803	用户 803	8671
804	用户 804	9661
805	用户 805	222
806	用户 806	2119
807	用户 807	161
808	用户 808	8343
809	用户 809	4437
810	用户 810	6538
811	用户 811	7135
812	用户 812	2114
813	用户 813	8035
814	用户 814	2153
815	用户 815	9221
816	用户 816	6103
817	用户 817	3267
818	用户 818	1974
819	用户 819	7809
820	用户 820	3791
821	用户 821	8375
822	用户 822	9666
823	用户 823	1619
824	用户 824	398
825	用户 825	8152
826	用户 826	1051
827	用户 827	5680
828	用户 828	6010
829	用户 829	1908
830	用户 830	5273
831	用户 831	546
832	用户 832	9433
833	用户 833	6086
834	用户 834	7748
835	用户 835	1179
836	用户 836	7485
837	用户 837	2520
838	用户 838	8597
839	用户 839	7202
840	用户 840	2941
841	用户 841	6788
842	用户 842	4113
843	用户 843	186
844	用户 844	7003
845	用户 845	4026
846	用户 846	2659
847	用户 847	3638
848	用户 848	9419
849	用户 849	8515
850	用户 850	3516
851	用户 851	7705
852	用户 852	9132
853	用户 853	5121
854	用户 854	3685
855	用户 855	1844
856	用户 856	5258
857	用户 857	2852
858	用户 858	7301
859	用户 859	9699
860	用户 860	6668
861	用户 861	6634
862	用户 862	6333
863	用户 863	1013
864	用户 864	5462
865	用户 865	3404
866	用户 866	1330
867	用户 867	9185
868	用户 868	7471
869	用户 869	1382
870	用户 870	9871
871	用户 871	6139
872	用户 872	1698
873	用户 873	8746
874	用户 874	4870
875	用户 875	5972
876	用户 876	8868
877	用户 877	4172
878	用户 878	2778
879	用户 879	6475
880	用户 880	2489
881	用户 881	3171
882	用户 882	4904
883	用户 883	2799
884	用户 884	5454
885	用户 885	6737
886	用户 886	8649
887	用户 887	8606
888	用户 888	8793
889	用户 889	2878
890	用户 890	7790
891	用户 891	9671
892	用户 892	4993
893	用户 893	994
894	用户 894	7577
895	用户 895	7903
896	用户 896	7077
897	用户 897	4900
898	用户 898	8007
899	用户 899	1333
900	用户 900	4610
901	用户 901	6474
902	用户 902	1592
903	用户 903	2361
904	用户 904	782
905	用户 905	4898
906	用户 906	3516
907	用户 907	3188
908	用户 908	9547
909	用户 909	3225
910	用户 910	3354
911	用户 911	7891
912	用户 912	5248
913	用户 913	4201
914	用户 914	8012
915	用户 915	8074
916	用户 916	3911
917	用户 917	1791
918	用户 918	3720
919	用户 919	8617
920	用户 920	5054
921	用户 921	7300
922	用户 922	5745
923	用户 923	2977
924	用户 924	3017
925	用户 925	6190
926	用户 926	9502
927	用户 927	7899
928	用户 928	1857
929	用户 929	8
930	用户 930	4193
931	用户 931	5004
932	用户 932	4820
933	用户 933	4522
934	用户 934	254
935	用户 935	7216
936	用户 936	217
937	用户 937	8783
938	用户 938	8769
939	用户 939	2892
940	用户 940	4696
941	用户 941	8923
942	用户 942	222
943	用户 943	2415
944	用户 944	4922
945	用户 945	3424
946	用户 946	9530
947	用户 947	8580
948	用户 948	1922
949	用户 949	4140
950	用户 950	7337
951	用户 951	9867
952	用户 952	3279
953	用户 953	6244
954	用户 954	5393
955	用户 955	5102
956	用户 956	1120
957	用户 957	734
958	用户 958	3929
959	用户 959	5043
960	用户 960	8162
961	用户 961	7105
962	用户 962	430
963	用户 963	4240
964	用户 964	2665
965	用户 965	7387
966	用户 966	9525
967	用户 967	4874
968	用户 968	7229
969	用户 969	4468
970	用户 970	7554
971	用户 971	5081
972	用户 972	7513
973	用户 973	3189
974	用户 974	608
975	用户 975	6296
976	用户 976	8736
977	用户 977	8716
978	用户 978	6048
979	用户 979	78
980	用户 980	4723
981	用户 981	4657
982	用户 982	1971
983	用户 983	7109
984	用户 984	2190
985	用户 985	11
986	用户 986	4395
987	用户 987	900
988	用户 988	820
989	用户 989	4071
990	用户 990	5643
991	用户 991	5160
992	用户 992	9845
993	用户 993	9637
994	用户 994	6686
995	用户 995	3175
996	用户 996	6963
997	用户 997	7661
998	用户 998	315
999	用户 999	8002
1000	用户 1000	6980

跳转到行:

<template>
  <div>
    <ZcTable
      ref="tableRef"
      :data="tableData"
      :columns="columns"
      virtual
      :height="300"
      border
    />
    <div style="margin-top: 10px; display: flex; gap: 10px; align-items: center;">
      <span>跳转到行:</span>
      <input
        v-model.number="targetRow"
        type="number"
        :min="1"
        :max="tableData.length"
        style="width: 80px; padding: 4px;"
      />
      <button @click="scrollToRow">跳转</button>
      <button @click="scrollToRowSmooth">平滑跳转</button>
      <button @click="scrollToTop">回到顶部</button>
      <button @click="scrollToBottom">跳转到底部</button>
    </div>
  </div>
</template>

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

const tableRef = ref()
const targetRow = ref(1)

const columns = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'value', label: '数值' },
]

const tableData = Array.from({ length: 1000 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  value: Math.floor(Math.random() * 10000),
}))

function scrollToRow() {
  tableRef.value?.virtualScrollTo(targetRow.value - 1, 'auto')
}

function scrollToRowSmooth() {
  tableRef.value?.virtualScrollTo(targetRow.value - 1, 'smooth')
}

function scrollToTop() {
  tableRef.value?.virtualScrollTo(0, 'smooth')
  targetRow.value = 1
}

function scrollToBottom() {
  tableRef.value?.virtualScrollTo(tableData.length - 1, 'smooth')
  targetRow.value = tableData.length
}
</script>

大数据量性能说明

虚拟滚动适用于处理大数据量场景，以下是性能对比：

数据量	普通渲染 DOM 节点数	虚拟滚动 DOM 节点数	渲染时间（普通）	渲染时间（虚拟）
100 行	~100	~20	~50ms	~30ms
1,000 行	~1,000	~20	~300ms	~50ms
10,000 行	~10,000	~20	~3000ms	~80ms
100,000 行	OOM	~20	浏览器崩溃	~150ms

虚拟滚动优势：

• ✅ 大幅减少 DOM 节点数量，提高渲染性能
• ✅ 滚动流畅，不随数据量增加而卡顿
• ✅ 内存占用稳定，不会因数据量增加而增长
• ✅ 支持所有常规功能（排序、筛选、选择等）

注意事项：

• ⚠️ 需要设置固定的表格高度
• ⚠️ 当前仅支持固定行高模式（estimatedRowHeight）
• ⚠️ 不兼容分页、树形表格、合并单元格功能
• ⚠️ 需要合理设置 estimatedRowHeight 以获得最佳体验

Table API

Props

参数	说明	类型	默认值
data	表格数据	Record<string, any>[]	—
columns	列配置数组	TableColumn[]	[]
rowKey	行数据的唯一键（字符串或函数）	string | Function	id
border	是否显示边框	boolean	false
stripe	是否显示斑马纹	boolean	false
height	表格高度（设置后表头固定）	number | string	—
highlightCurrentRow	是否高亮当前行	boolean	false
defaultSort	默认排序状态	SortState	{ prop: "", order: null }
selectable	是否启用行选择（复选框）	boolean	false
pagination	是否启用分页	boolean	false
currentPage	当前页码	number	1
pageSize	每页条数	number	10
emptyText	空数据时显示的文本	string	暂无数据
showHeader	是否显示表头	boolean	true
size	表格尺寸	large | medium | small	medium
virtual	是否启用虚拟滚动（需设置 height）	boolean	false
estimatedRowHeight	虚拟滚动预估行高（px）	number	48
spanMethod	合并单元格方法	SpanMethod	—
expandable	是否启用展开行	boolean	false
treeProps	树形表格配置	TableTreePropsConfig	—
defaultExpandAll	是否默认展开所有树节点	boolean	false
draggable	是否启用行拖拽排序	boolean	false
editable	是否启用可编辑单元格	boolean	false
showSummary	是否显示总结行	boolean	false
summaryMethod	自定义合计方法	SummaryMethod	—
summaryText	总结行首列标签文字	string	合计
showColumnSettings	是否显示列设置面板	boolean	false
resizable	是否启用列宽拖拽	boolean	false

Events

事件名	说明	回调参数
sort-change	排序变化时触发	(sort: SortState)
filter-change	筛选变化时触发	(filters: FilterState)
selection-change	选中项变化时触发	(selection: Record<string, any>[])
current-change	页码变化时触发	(currentPage: number)
row-click	点击行时触发	(row, column, event)
cell-click	点击单元格时触发	(row, column, cell, event)
expand-change	展开/收起行时触发	(row, expanded: boolean)
tree-toggle	树节点展开/收起时触发	(row, expanded: boolean)
row-drag-end	行拖拽排序完成时触发	(event: DragSortEvent)
cell-edit	单元格编辑确认时触发	(payload: { row, column, value, oldValue })
column-resize	列宽拖拽结束时触发	(event: ColumnResizeEvent)
column-settings-change	列设置变化时触发	(settings: ColumnSettingItem[])

Slots

插槽名	说明
header-[prop]	自定义表头内容，作用域参数：{ column }
cell-[prop]	自定义单元格内容，作用域参数：{ row, column, value, index }
expand	展开行内容，作用域参数：{ row, index }

TableColumn 配置

参数	说明	类型	默认值
prop	列字段名	string	—
label	列标题显示文字	string	—
width	列宽（px）	number | string	—
minWidth	最小列宽	number | string	—
fixed	固定列位置	left | right | boolean	—
sortable	是否可排序（custom 表示由父组件处理后端排序）	boolean | "custom"	—
filterable	是否可筛选	boolean	—
filters	筛选选项	TableFilterOption[]	—
align	对齐方式	left | center | right	left
headerAlign	表头对齐方式（优先于 align）	left | center | right	—
formatter	自定义格式化函数	(row, column, cellValue, index) => string	—
className	自定义列类名	string	—
visible	是否可见（设为 false 隐藏列）	boolean	true
resizable	该列是否可拖拽调整宽度（需配合 resizable 属性）	boolean	true
editable	该列单元格是否可编辑（需配合 editable 属性）	boolean	true
editComponent	自定义编辑组件（替代默认 input）	Component	—
editPlaceholder	编辑输入框的占位文字	string	—

类型定义

SpanMethod

type SpanMethod = (data: {
  row: Record<string, any>
  column: TableColumn
  rowIndex: number
  columnIndex: number
}) => SpanValue | [number, number] | undefined

interface SpanValue {
  rowspan: number
  colspan: number
}

TableTreePropsConfig

interface TableTreePropsConfig {
  children?: string    // 子节点字段名，默认 'children'
  hasChildren?: string // 是否有子节点的字段名（用于懒加载）
  indent?: number      // 每层缩进宽度（px），默认 16
}

SummaryMethod

type SummaryMethod = (data: {
  columns: TableColumn[]
  data: Record<string, any>[]
}) => (string | VNode)[]

ColumnSettingItem

interface ColumnSettingItem {
  prop: string
  label: string
  visible: boolean
  order: number
}

DragSortEvent

interface DragSortEvent {
  oldIndex: number
  newIndex: number
  data: Record<string, any>[]
}

ColumnResizeEvent

interface ColumnResizeEvent {
  prop: string
  oldWidth: number
  newWidth: number
}

兼容性说明

功能组合	兼容性	说明
virtual + treeProps	❌ 不兼容	虚拟模式忽略树形结构
virtual + spanMethod	❌ 不兼容	虚拟模式下合并结果可能错位
virtual + pagination	❌ 不兼容	虚拟模式仅在非分页时生效
virtual + sortable	✅ 兼容	排序功能正常工作
virtual + filterable	✅ 兼容	筛选功能正常工作
virtual + selectable	✅ 兼容	选择功能正常工作
virtual + fixed	✅ 兼容	固定列功能正常工作
spanMethod + fixed	⚠️ 注意	合并单元格可能影响固定列偏移计算
draggable + treeProps	⚠️ 注意	拖拽基于扁平行索引，非树形层级
showSummary + pagination	✅ 兼容	合计基于全量数据，非当前页
editable + treeProps	✅ 兼容	正常工作
resizable + showColumnSettings	✅ 兼容	正常工作

暴露的方法 (Exposed Methods)

方法名	参数	说明
virtualScrollTo	(index: number, behavior?: ScrollBehavior)	滚动到指定行索引（从 0 开始），behavior 可选 'auto' 或 'smooth'
startEdit	(row, column)	开始编辑单元格
confirmEdit	(row, column)	确认编辑
cancelEdit	()	取消编辑