Ant Design Vue 表格复选框功能实现详解

在 Vue 项目中使用 Ant Design Vue 组件库时，表格(Table)组件的行选择(rowSelection)功能是一个常用特性。本文将深入解析如何正确实现表格的复选框选择功能，并分享一些常见问题的解决方案。

核心实现要点

1. 数据准备

要实现表格的行选择功能，首先需要确保数据源中的每条记录都包含一个唯一的key字段。这个key是Ant Design Vue识别和跟踪选中行的关键标识。

const dataSource = [
  {
    key: '1',  // 必须包含key字段
    name: '张三',
    age: 32,
    address: '北京市'
  },
  // 其他数据...
];

2. 状态管理

需要定义两个关键状态变量来管理选择行为：

const selectedRowKeys = ref([]);  // 存储选中行的key值数组
const selectedRows = ref([]);     // 存储选中行的完整数据数组

3. 配置rowSelection

在表格组件中配置rowSelection属性：

<a-table
  :columns="columns"
  :dataSource="dataSource"
  :rowSelection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }"
/>

完整实现方案

下面是一个完整的实现示例：

<template>
  <a-table
    :columns="columns"
    :dataSource="dataSource"
    :rowSelection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange,
    }"
  />
</template>

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

// 表格列定义
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
];

// 表格数据
const dataSource = [
  {
    key: '1',
    name: '张三',
    age: 32,
    address: '北京市'
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: '上海市'
  },
  {
    key: '3',
    name: '王五',
    age: 28,
    address: '广州市'
  }
];

// 选中状态
const selectedRowKeys = ref([]);
const selectedRows = ref([]);

// 选择变化回调
const onSelectChange = (selectedKeys, selectedRowsData) => {
  console.log('selectedRowKeys changed: ', selectedKeys);
  selectedRowKeys.value = selectedKeys;
  selectedRows.value = selectedRowsData;
};
</script>

常见问题解析

1. 复选框无法显示选中状态：通常是因为没有正确绑定selectedRowKeys到rowSelection属性，或者数据源中的记录缺少key字段。

2. 只能获取key无法获取完整数据：需要在onChange回调中同时接收第二个参数selectedRowsData，这个参数包含了选中行的完整数据。

3. 全选功能异常：确保数据源中的每条记录都有唯一的key，并且selectedRowKeys是响应式的(ref或reactive)。

高级用法

自定义选择逻辑

可以通过getCheckboxProps属性自定义每行的可选状态：

:rowSelection="{
  selectedRowKeys: selectedRowKeys,
  onChange: onSelectChange,
  getCheckboxProps: (record) => ({
    disabled: record.age > 40, // 年龄大于40的不可选
  }),
}"

单选模式

如果需要实现单选效果，可以修改onChange回调：

const onSelectChange = (selectedKeys) => {
  selectedRowKeys.value = selectedKeys.length ? [selectedKeys[selectedKeys.length - 1]] : [];
};

通过以上详细解析和示例，开发者应该能够正确实现Ant Design Vue表格的复选框选择功能，并解决常见的实现问题。记住数据准备和状态管理是实现这一功能的关键所在。