Vue 3 和 Ant Design 版本3.2.20 Table解析

Vue 3 与 Ant Design Vue (3.2.20) Table 组件解析

Ant Design Vue 的 Table 组件是一个功能强大的数据表格组件，适用于 Vue 3 项目。下面我将详细介绍其核心功能和用法。

基本用法

<template><a-table :columns="columns" :dataSource="data" rowKey="id"/>
</template><script setup>
import { ref } from 'vue';const columns = ref([{title: '姓名',dataIndex: 'name',key: 'name',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '地址',dataIndex: 'address',key: 'address',},
]);const data = ref([{id: '1',name: '张三',age: 32,address: '西湖区湖底公园1号',},{id: '2',name: '李四',age: 42,address: '西湖区湖底公园2号',},
]);
</script>

核心特性

1. 列配置 (columns)

列配置是 Table 的核心，支持多种配置选项：

const columns = ref([{title: '姓名',          // 列标题dataIndex: 'name',     // 数据字段名key: 'name',           // React需要的keywidth: 150,            // 列宽度fixed: 'left',         // 固定列align: 'center',       // 对齐方式ellipsis: true,        // 超出省略customRender: ({ text, record, index }) => {  // 自定义渲染return `${text}(${record.age})`;},sorter: (a, b) => a.age - b.age,  // 排序函数filters: [             // 筛选配置{ text: '张三', value: '张三' },{ text: '李四', value: '李四' },],onFilter: (value, record) => record.name.includes(value),},// 更多列...
]);

2. 分页配置

<a-table:pagination="{current: currentPage,pageSize: pageSize,total: total,showSizeChanger: true,showQuickJumper: true,showTotal: total => `共 ${total} 条`,onChange: handlePageChange,onShowSizeChange: handleSizeChange,}"
/>

3. 选择功能

<a-tablerowSelection={{type: 'checkbox', // 或 'radio'selectedRowKeys: selectedKeys,onChange: (selectedRowKeys, selectedRows) => {// 处理选择变化},getCheckboxProps: record => ({disabled: record.disabled, // 配置不可选的项}),}}
/>

4. 排序和筛选

<a-table:columns="columns":dataSource="data"@change="handleTableChange"  // 排序、筛选、分页变化时触发
/>

5. 可展开行

<a-table:expandable="{expandedRowRender: record => `<p>${record.description}</p>`,rowExpandable: record => record.name !== '不可展开',expandRowByClick: true,}"
/>

6. 自定义样式

<a-table:rowClassName="(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'":customRow="(record, index) => ({onClick: () => handleRowClick(record),style: { cursor: 'pointer' },})"
/>

高级功能

1. 编辑表格

<a-table:columns="editableColumns":dataSource="editableData"
/><script setup>
const editableColumns = ref([{title: '姓名',dataIndex: 'name',key: 'name',customRender: ({ text, record, index }) => {return h(EditableCell, {value: text,onChange: value => handleChange(value, record, 'name'),});},},// 其他列...
]);
</script>

2. 虚拟滚动 (大数据量优化)

<a-table:columns="columns":dataSource="largeData":scroll="{ x: 1500, y: 500 }"
/>

3. 表头分组

const columns = ref([{title: '个人信息',children: [{ title: '姓名', dataIndex: 'name', key: 'name' },{ title: '年龄', dataIndex: 'age', key: 'age' },],},{title: '联系信息',children: [{ title: '地址', dataIndex: 'address', key: 'address' },{ title: '电话', dataIndex: 'phone', key: 'phone' },],},
]);