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需要的key
    width: 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-table
  rowSelection={{
    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' },
    ],
  },
]);

常见问题解决方案

1. 数据更新但视图不更新：

   • 确保使用响应式数据 (ref 或 reactive)
   • 对于嵌套数据，可能需要深拷贝触发更新

2. 自定义单元格内容：

   • 使用 customRender 属性
   • 可以返回 Vue 组件或 JSX

3. 性能优化：

   • 大数据量使用虚拟滚动
   • 避免在 customRender 中进行复杂计算
   • 使用 rowKey 确保正确的行识别

4. 固定列和表头：

   • 设置 scroll 属性
   • 在列配置中使用 fixed: 'left' 或 fixed: 'right'

Ant Design Vue 的 Table 组件功能非常丰富，以上只是核心功能的概述。实际使用时，建议参考官方文档获取最新和最详细的信息。