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	8769
2024-01-02	用户2	1800
2024-01-03	用户3	9490
2024-01-04	用户4	7630
2024-01-05	用户5	8056

共 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	2262
2	用户 2	6994
3	用户 3	3948
4	用户 4	3496
5	用户 5	2920
6	用户 6	4453
7	用户 7	2153
8	用户 8	5641
9	用户 9	9036
10	用户 10	7581
11	用户 11	6739
12	用户 12	6300
13	用户 13	505
14	用户 14	645
15	用户 15	1024
16	用户 16	8671
17	用户 17	2922
18	用户 18	9408
19	用户 19	7545
20	用户 20	4163
21	用户 21	1062
22	用户 22	2401
23	用户 23	3209
24	用户 24	5879
25	用户 25	8671
26	用户 26	3254
27	用户 27	1255
28	用户 28	4533
29	用户 29	9083
30	用户 30	7504
31	用户 31	4150
32	用户 32	920
33	用户 33	5592
34	用户 34	1384
35	用户 35	2288
36	用户 36	1856
37	用户 37	5692
38	用户 38	5265
39	用户 39	6043
40	用户 40	518
41	用户 41	9141
42	用户 42	9017
43	用户 43	3886
44	用户 44	3492
45	用户 45	9903
46	用户 46	3623
47	用户 47	9083
48	用户 48	3328
49	用户 49	6889
50	用户 50	5911
51	用户 51	9733
52	用户 52	203
53	用户 53	7463
54	用户 54	5224
55	用户 55	3247
56	用户 56	4630
57	用户 57	2880
58	用户 58	8466
59	用户 59	7554
60	用户 60	1546
61	用户 61	4501
62	用户 62	7999
63	用户 63	7936
64	用户 64	3314
65	用户 65	6823
66	用户 66	5440
67	用户 67	3928
68	用户 68	2855
69	用户 69	2096
70	用户 70	8686
71	用户 71	6421
72	用户 72	1582
73	用户 73	9096
74	用户 74	2437
75	用户 75	5950
76	用户 76	108
77	用户 77	5843
78	用户 78	1555
79	用户 79	9545
80	用户 80	1995
81	用户 81	9772
82	用户 82	505
83	用户 83	7497
84	用户 84	138
85	用户 85	2806
86	用户 86	5185
87	用户 87	6840
88	用户 88	656
89	用户 89	4972
90	用户 90	9448
91	用户 91	3115
92	用户 92	6621
93	用户 93	3329
94	用户 94	6407
95	用户 95	9639
96	用户 96	5466
97	用户 97	741
98	用户 98	541
99	用户 99	4077
100	用户 100	8520
101	用户 101	1019
102	用户 102	3383
103	用户 103	9401
104	用户 104	8505
105	用户 105	2144
106	用户 106	9734
107	用户 107	4717
108	用户 108	9583
109	用户 109	3613
110	用户 110	1433
111	用户 111	6160
112	用户 112	6016
113	用户 113	2077
114	用户 114	1037
115	用户 115	839
116	用户 116	4435
117	用户 117	7562
118	用户 118	6414
119	用户 119	9441
120	用户 120	7782
121	用户 121	2428
122	用户 122	1654
123	用户 123	8768
124	用户 124	4848
125	用户 125	7173
126	用户 126	7615
127	用户 127	4118
128	用户 128	7229
129	用户 129	2001
130	用户 130	252
131	用户 131	1246
132	用户 132	8938
133	用户 133	7221
134	用户 134	1485
135	用户 135	9848
136	用户 136	4971
137	用户 137	9128
138	用户 138	2299
139	用户 139	6773
140	用户 140	3909
141	用户 141	9191
142	用户 142	4947
143	用户 143	6901
144	用户 144	7752
145	用户 145	5743
146	用户 146	2821
147	用户 147	877
148	用户 148	6596
149	用户 149	3502
150	用户 150	6416
151	用户 151	7725
152	用户 152	9491
153	用户 153	6653
154	用户 154	1426
155	用户 155	9784
156	用户 156	1446
157	用户 157	7556
158	用户 158	2197
159	用户 159	6048
160	用户 160	762
161	用户 161	7110
162	用户 162	4204
163	用户 163	3258
164	用户 164	773
165	用户 165	4890
166	用户 166	8557
167	用户 167	6664
168	用户 168	9135
169	用户 169	5996
170	用户 170	1121
171	用户 171	6735
172	用户 172	2661
173	用户 173	2586
174	用户 174	5229
175	用户 175	1773
176	用户 176	9149
177	用户 177	3529
178	用户 178	3515
179	用户 179	7577
180	用户 180	7684
181	用户 181	1083
182	用户 182	7815
183	用户 183	1577
184	用户 184	616
185	用户 185	8590
186	用户 186	3874
187	用户 187	9926
188	用户 188	221
189	用户 189	1174
190	用户 190	8307
191	用户 191	1870
192	用户 192	8690
193	用户 193	7786
194	用户 194	3365
195	用户 195	5504
196	用户 196	8430
197	用户 197	6984
198	用户 198	305
199	用户 199	3825
200	用户 200	9267
201	用户 201	4129
202	用户 202	1671
203	用户 203	6366
204	用户 204	9678
205	用户 205	9071
206	用户 206	741
207	用户 207	9732
208	用户 208	2525
209	用户 209	8346
210	用户 210	4474
211	用户 211	7357
212	用户 212	2862
213	用户 213	9789
214	用户 214	2053
215	用户 215	152
216	用户 216	5966
217	用户 217	7460
218	用户 218	4838
219	用户 219	5705
220	用户 220	8617
221	用户 221	8313
222	用户 222	7590
223	用户 223	9106
224	用户 224	9419
225	用户 225	3787
226	用户 226	3262
227	用户 227	6278
228	用户 228	9589
229	用户 229	8499
230	用户 230	3923
231	用户 231	1460
232	用户 232	2853
233	用户 233	5489
234	用户 234	8000
235	用户 235	5332
236	用户 236	6186
237	用户 237	7090
238	用户 238	9578
239	用户 239	9315
240	用户 240	707
241	用户 241	9413
242	用户 242	922
243	用户 243	7904
244	用户 244	3758
245	用户 245	7007
246	用户 246	9918
247	用户 247	1537
248	用户 248	6799
249	用户 249	9614
250	用户 250	1312
251	用户 251	9131
252	用户 252	1353
253	用户 253	3821
254	用户 254	3180
255	用户 255	7491
256	用户 256	3438
257	用户 257	6284
258	用户 258	1952
259	用户 259	7709
260	用户 260	6167
261	用户 261	1881
262	用户 262	4760
263	用户 263	3649
264	用户 264	5650
265	用户 265	6058
266	用户 266	8721
267	用户 267	7644
268	用户 268	872
269	用户 269	903
270	用户 270	8560
271	用户 271	2288
272	用户 272	4347
273	用户 273	956
274	用户 274	3274
275	用户 275	3366
276	用户 276	7075
277	用户 277	611
278	用户 278	7615
279	用户 279	955
280	用户 280	4598
281	用户 281	428
282	用户 282	7287
283	用户 283	2326
284	用户 284	637
285	用户 285	7915
286	用户 286	7683
287	用户 287	7134
288	用户 288	93
289	用户 289	3724
290	用户 290	7593
291	用户 291	3448
292	用户 292	1706
293	用户 293	7153
294	用户 294	7594
295	用户 295	581
296	用户 296	3915
297	用户 297	2535
298	用户 298	2987
299	用户 299	7367
300	用户 300	7556
301	用户 301	6412
302	用户 302	4814
303	用户 303	1186
304	用户 304	1049
305	用户 305	9598
306	用户 306	2503
307	用户 307	7036
308	用户 308	1407
309	用户 309	6913
310	用户 310	3006
311	用户 311	38
312	用户 312	3169
313	用户 313	7855
314	用户 314	7652
315	用户 315	389
316	用户 316	2375
317	用户 317	6249
318	用户 318	8987
319	用户 319	1870
320	用户 320	2877
321	用户 321	8316
322	用户 322	800
323	用户 323	2143
324	用户 324	3664
325	用户 325	1470
326	用户 326	680
327	用户 327	84
328	用户 328	1306
329	用户 329	8424
330	用户 330	4521
331	用户 331	1599
332	用户 332	7314
333	用户 333	875
334	用户 334	4727
335	用户 335	1820
336	用户 336	5475
337	用户 337	1273
338	用户 338	9318
339	用户 339	8723
340	用户 340	2790
341	用户 341	8871
342	用户 342	652
343	用户 343	7155
344	用户 344	2141
345	用户 345	8239
346	用户 346	8773
347	用户 347	5122
348	用户 348	886
349	用户 349	6401
350	用户 350	1156
351	用户 351	2325
352	用户 352	9381
353	用户 353	5460
354	用户 354	3162
355	用户 355	9423
356	用户 356	5871
357	用户 357	6871
358	用户 358	5570
359	用户 359	2987
360	用户 360	399
361	用户 361	9996
362	用户 362	7447
363	用户 363	991
364	用户 364	7261
365	用户 365	973
366	用户 366	6779
367	用户 367	3933
368	用户 368	4967
369	用户 369	5790
370	用户 370	3956
371	用户 371	9155
372	用户 372	6167
373	用户 373	6225
374	用户 374	2670
375	用户 375	6352
376	用户 376	305
377	用户 377	4008
378	用户 378	5844
379	用户 379	5575
380	用户 380	9482
381	用户 381	518
382	用户 382	493
383	用户 383	783
384	用户 384	2025
385	用户 385	264
386	用户 386	6424
387	用户 387	1533
388	用户 388	4013
389	用户 389	7690
390	用户 390	3327
391	用户 391	1183
392	用户 392	9052
393	用户 393	6003
394	用户 394	5092
395	用户 395	6800
396	用户 396	4237
397	用户 397	76
398	用户 398	5277
399	用户 399	4023
400	用户 400	7572
401	用户 401	3913
402	用户 402	6875
403	用户 403	8127
404	用户 404	3379
405	用户 405	8380
406	用户 406	6929
407	用户 407	3320
408	用户 408	2715
409	用户 409	1265
410	用户 410	6568
411	用户 411	3371
412	用户 412	7162
413	用户 413	2619
414	用户 414	4320
415	用户 415	2127
416	用户 416	738
417	用户 417	2482
418	用户 418	9206
419	用户 419	1403
420	用户 420	8823
421	用户 421	6584
422	用户 422	4461
423	用户 423	8242
424	用户 424	6539
425	用户 425	4916
426	用户 426	4855
427	用户 427	3641
428	用户 428	2615
429	用户 429	5222
430	用户 430	3589
431	用户 431	6254
432	用户 432	9090
433	用户 433	6912
434	用户 434	3844
435	用户 435	8594
436	用户 436	7028
437	用户 437	8374
438	用户 438	8701
439	用户 439	2955
440	用户 440	5993
441	用户 441	813
442	用户 442	1678
443	用户 443	3823
444	用户 444	3114
445	用户 445	7001
446	用户 446	5857
447	用户 447	8208
448	用户 448	3107
449	用户 449	6734
450	用户 450	9946
451	用户 451	6257
452	用户 452	7012
453	用户 453	9340
454	用户 454	5279
455	用户 455	3103
456	用户 456	3516
457	用户 457	5681
458	用户 458	7819
459	用户 459	7716
460	用户 460	5205
461	用户 461	5004
462	用户 462	2344
463	用户 463	7681
464	用户 464	9611
465	用户 465	9087
466	用户 466	3634
467	用户 467	3866
468	用户 468	8328
469	用户 469	3092
470	用户 470	6144
471	用户 471	1318
472	用户 472	2231
473	用户 473	4194
474	用户 474	5157
475	用户 475	7819
476	用户 476	1550
477	用户 477	9089
478	用户 478	7264
479	用户 479	1632
480	用户 480	9147
481	用户 481	5633
482	用户 482	5824
483	用户 483	5138
484	用户 484	6160
485	用户 485	9969
486	用户 486	9577
487	用户 487	2832
488	用户 488	3418
489	用户 489	2200
490	用户 490	7172
491	用户 491	1799
492	用户 492	128
493	用户 493	1178
494	用户 494	719
495	用户 495	7561
496	用户 496	6869
497	用户 497	9
498	用户 498	7388
499	用户 499	3285
500	用户 500	7788
501	用户 501	9409
502	用户 502	7832
503	用户 503	9814
504	用户 504	3023
505	用户 505	5272
506	用户 506	708
507	用户 507	260
508	用户 508	6909
509	用户 509	2734
510	用户 510	2933
511	用户 511	6340
512	用户 512	7933
513	用户 513	6196
514	用户 514	6123
515	用户 515	9981
516	用户 516	5250
517	用户 517	4337
518	用户 518	122
519	用户 519	26
520	用户 520	9721
521	用户 521	8119
522	用户 522	2799
523	用户 523	7275
524	用户 524	5472
525	用户 525	5172
526	用户 526	113
527	用户 527	4298
528	用户 528	9133
529	用户 529	1856
530	用户 530	1248
531	用户 531	2620
532	用户 532	4950
533	用户 533	7445
534	用户 534	3851
535	用户 535	6931
536	用户 536	9855
537	用户 537	4651
538	用户 538	4381
539	用户 539	2319
540	用户 540	9363
541	用户 541	860
542	用户 542	3207
543	用户 543	3120
544	用户 544	9295
545	用户 545	5081
546	用户 546	4784
547	用户 547	6087
548	用户 548	3639
549	用户 549	2294
550	用户 550	7071
551	用户 551	5926
552	用户 552	5313
553	用户 553	5359
554	用户 554	5077
555	用户 555	9507
556	用户 556	68
557	用户 557	6485
558	用户 558	8884
559	用户 559	7945
560	用户 560	6253
561	用户 561	8314
562	用户 562	4401
563	用户 563	1147
564	用户 564	5828
565	用户 565	5685
566	用户 566	5180
567	用户 567	4848
568	用户 568	8140
569	用户 569	2834
570	用户 570	7253
571	用户 571	9806
572	用户 572	9022
573	用户 573	146
574	用户 574	1309
575	用户 575	1236
576	用户 576	7171
577	用户 577	1923
578	用户 578	2708
579	用户 579	9332
580	用户 580	5513
581	用户 581	6354
582	用户 582	4003
583	用户 583	9010
584	用户 584	1241
585	用户 585	8733
586	用户 586	2085
587	用户 587	928
588	用户 588	9097
589	用户 589	9631
590	用户 590	9015
591	用户 591	6315
592	用户 592	2657
593	用户 593	4775
594	用户 594	72
595	用户 595	1183
596	用户 596	2671
597	用户 597	7719
598	用户 598	6223
599	用户 599	8255
600	用户 600	1456
601	用户 601	5526
602	用户 602	3876
603	用户 603	7645
604	用户 604	5037
605	用户 605	1848
606	用户 606	6874
607	用户 607	6554
608	用户 608	6928
609	用户 609	5471
610	用户 610	7676
611	用户 611	4936
612	用户 612	475
613	用户 613	6654
614	用户 614	7982
615	用户 615	8298
616	用户 616	5735
617	用户 617	8799
618	用户 618	2930
619	用户 619	578
620	用户 620	1764
621	用户 621	6681
622	用户 622	2569
623	用户 623	2580
624	用户 624	4288
625	用户 625	4018
626	用户 626	8988
627	用户 627	544
628	用户 628	5280
629	用户 629	912
630	用户 630	2063
631	用户 631	7588
632	用户 632	7904
633	用户 633	3071
634	用户 634	6029
635	用户 635	7148
636	用户 636	2439
637	用户 637	3452
638	用户 638	4605
639	用户 639	7241
640	用户 640	3190
641	用户 641	5046
642	用户 642	9649
643	用户 643	8892
644	用户 644	4840
645	用户 645	1046
646	用户 646	4191
647	用户 647	6604
648	用户 648	9753
649	用户 649	3429
650	用户 650	651
651	用户 651	2823
652	用户 652	6315
653	用户 653	7443
654	用户 654	796
655	用户 655	3788
656	用户 656	7785
657	用户 657	6902
658	用户 658	1409
659	用户 659	6479
660	用户 660	667
661	用户 661	1707
662	用户 662	2944
663	用户 663	7899
664	用户 664	3741
665	用户 665	5839
666	用户 666	3146
667	用户 667	7436
668	用户 668	347
669	用户 669	3256
670	用户 670	4003
671	用户 671	2806
672	用户 672	3132
673	用户 673	4096
674	用户 674	7022
675	用户 675	9053
676	用户 676	2670
677	用户 677	4528
678	用户 678	5342
679	用户 679	7994
680	用户 680	4304
681	用户 681	6320
682	用户 682	9123
683	用户 683	8952
684	用户 684	5510
685	用户 685	1685
686	用户 686	9831
687	用户 687	4717
688	用户 688	2086
689	用户 689	7121
690	用户 690	6509
691	用户 691	6906
692	用户 692	785
693	用户 693	7761
694	用户 694	3411
695	用户 695	6634
696	用户 696	4844
697	用户 697	8855
698	用户 698	4484
699	用户 699	1911
700	用户 700	8350
701	用户 701	3740
702	用户 702	1125
703	用户 703	9029
704	用户 704	6100
705	用户 705	2453
706	用户 706	3489
707	用户 707	3512
708	用户 708	9577
709	用户 709	2752
710	用户 710	5935
711	用户 711	2009
712	用户 712	4427
713	用户 713	7385
714	用户 714	2963
715	用户 715	2098
716	用户 716	8482
717	用户 717	9721
718	用户 718	1932
719	用户 719	4802
720	用户 720	5851
721	用户 721	3800
722	用户 722	8131
723	用户 723	3216
724	用户 724	1155
725	用户 725	7585
726	用户 726	5382
727	用户 727	6518
728	用户 728	3335
729	用户 729	5904
730	用户 730	7632
731	用户 731	2891
732	用户 732	545
733	用户 733	7566
734	用户 734	644
735	用户 735	4420
736	用户 736	7184
737	用户 737	8421
738	用户 738	7049
739	用户 739	3280
740	用户 740	5280
741	用户 741	2449
742	用户 742	2131
743	用户 743	3788
744	用户 744	2298
745	用户 745	6490
746	用户 746	9640
747	用户 747	9792
748	用户 748	4086
749	用户 749	278
750	用户 750	1563
751	用户 751	5049
752	用户 752	3832
753	用户 753	2349
754	用户 754	1555
755	用户 755	6080
756	用户 756	8357
757	用户 757	7318
758	用户 758	9165
759	用户 759	2311
760	用户 760	4141
761	用户 761	4175
762	用户 762	9828
763	用户 763	3001
764	用户 764	758
765	用户 765	5893
766	用户 766	4390
767	用户 767	2667
768	用户 768	4291
769	用户 769	7652
770	用户 770	5805
771	用户 771	3200
772	用户 772	4697
773	用户 773	5862
774	用户 774	9633
775	用户 775	1480
776	用户 776	9083
777	用户 777	8207
778	用户 778	8896
779	用户 779	7775
780	用户 780	3095
781	用户 781	5034
782	用户 782	6313
783	用户 783	529
784	用户 784	8106
785	用户 785	7348
786	用户 786	728
787	用户 787	9434
788	用户 788	3549
789	用户 789	8811
790	用户 790	3274
791	用户 791	9960
792	用户 792	9110
793	用户 793	9697
794	用户 794	1577
795	用户 795	5617
796	用户 796	2825
797	用户 797	8913
798	用户 798	4155
799	用户 799	1193
800	用户 800	2380
801	用户 801	6442
802	用户 802	4098
803	用户 803	943
804	用户 804	373
805	用户 805	1508
806	用户 806	4821
807	用户 807	8659
808	用户 808	4373
809	用户 809	8103
810	用户 810	3164
811	用户 811	1178
812	用户 812	9131
813	用户 813	8981
814	用户 814	4328
815	用户 815	2216
816	用户 816	1175
817	用户 817	8763
818	用户 818	8712
819	用户 819	4305
820	用户 820	8294
821	用户 821	4170
822	用户 822	9449
823	用户 823	1979
824	用户 824	3182
825	用户 825	7369
826	用户 826	6009
827	用户 827	2114
828	用户 828	4859
829	用户 829	2446
830	用户 830	6165
831	用户 831	8496
832	用户 832	3114
833	用户 833	3039
834	用户 834	3489
835	用户 835	5888
836	用户 836	1869
837	用户 837	8317
838	用户 838	6290
839	用户 839	7623
840	用户 840	2371
841	用户 841	2621
842	用户 842	7675
843	用户 843	5355
844	用户 844	7081
845	用户 845	8818
846	用户 846	5739
847	用户 847	9186
848	用户 848	447
849	用户 849	5664
850	用户 850	7648
851	用户 851	2662
852	用户 852	2619
853	用户 853	2197
854	用户 854	2555
855	用户 855	8110
856	用户 856	888
857	用户 857	5766
858	用户 858	8853
859	用户 859	9402
860	用户 860	3996
861	用户 861	8767
862	用户 862	7254
863	用户 863	9750
864	用户 864	2678
865	用户 865	1961
866	用户 866	4068
867	用户 867	7499
868	用户 868	6201
869	用户 869	6995
870	用户 870	6017
871	用户 871	3424
872	用户 872	8633
873	用户 873	8241
874	用户 874	1182
875	用户 875	3453
876	用户 876	2222
877	用户 877	8610
878	用户 878	9373
879	用户 879	6524
880	用户 880	1560
881	用户 881	432
882	用户 882	4922
883	用户 883	6052
884	用户 884	215
885	用户 885	3204
886	用户 886	5705
887	用户 887	4670
888	用户 888	5688
889	用户 889	5301
890	用户 890	8615
891	用户 891	1607
892	用户 892	2125
893	用户 893	5687
894	用户 894	1872
895	用户 895	8792
896	用户 896	5112
897	用户 897	4838
898	用户 898	9817
899	用户 899	1635
900	用户 900	1005
901	用户 901	9870
902	用户 902	715
903	用户 903	8057
904	用户 904	5970
905	用户 905	5448
906	用户 906	1587
907	用户 907	7494
908	用户 908	1765
909	用户 909	8005
910	用户 910	8511
911	用户 911	1037
912	用户 912	7513
913	用户 913	8038
914	用户 914	2870
915	用户 915	6557
916	用户 916	9478
917	用户 917	341
918	用户 918	5914
919	用户 919	7828
920	用户 920	3578
921	用户 921	3531
922	用户 922	7763
923	用户 923	4007
924	用户 924	3727
925	用户 925	5211
926	用户 926	6974
927	用户 927	4980
928	用户 928	5742
929	用户 929	3398
930	用户 930	4235
931	用户 931	9287
932	用户 932	8589
933	用户 933	8410
934	用户 934	279
935	用户 935	2839
936	用户 936	8255
937	用户 937	2822
938	用户 938	1338
939	用户 939	8914
940	用户 940	531
941	用户 941	4924
942	用户 942	6093
943	用户 943	8605
944	用户 944	7787
945	用户 945	1352
946	用户 946	813
947	用户 947	9078
948	用户 948	6590
949	用户 949	8789
950	用户 950	6616
951	用户 951	3793
952	用户 952	819
953	用户 953	8258
954	用户 954	5694
955	用户 955	2627
956	用户 956	2761
957	用户 957	807
958	用户 958	94
959	用户 959	9154
960	用户 960	5339
961	用户 961	5757
962	用户 962	2840
963	用户 963	5589
964	用户 964	3571
965	用户 965	9323
966	用户 966	952
967	用户 967	5205
968	用户 968	7951
969	用户 969	2041
970	用户 970	3556
971	用户 971	9714
972	用户 972	8754
973	用户 973	7144
974	用户 974	1763
975	用户 975	3469
976	用户 976	2994
977	用户 977	8919
978	用户 978	3150
979	用户 979	6669
980	用户 980	4730
981	用户 981	5221
982	用户 982	8168
983	用户 983	3809
984	用户 984	7078
985	用户 985	9868
986	用户 986	9388
987	用户 987	9726
988	用户 988	8077
989	用户 989	1979
990	用户 990	6775
991	用户 991	6765
992	用户 992	4985
993	用户 993	7955
994	用户 994	5485
995	用户 995	8171
996	用户 996	5903
997	用户 997	6091
998	用户 998	8705
999	用户 999	7817
1000	用户 1000	4026

跳转到行:

<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	()	取消编辑