vue3 a-table 选中

### Vue3 中 a-table 组件实现选中行功能 在 Vue3 使用 Ant Design 的 `a-table` 组件时，可以通过配置特定属性来实现选中行的功能。为了使表格具备多选或单选的能力，主要依赖于 `rowSelection` 属性以及相应的事件处理逻辑。 #### 配置 rowSelection 属性 通过设置 `:row-selection="getRowSelection"` 来启用行的选择模式。此属性接受一个对象作为其值，该对象可以包含多个选项来自定义选择行为，比如是否允许多选(`type`)、默认选中的键列表(`selectedRowKeys`)等[^3]。 ```javascript const getRowSelection = computed(() => ({ onChange: (selectedRowKeys, selectedRows) => { console.log('Selected Row Keys:', selectedRowKeys); console.log('Selected Rows:', selectedRows); }, onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); }, onSelectAll: (selected, selectedRows, changeRows) => { console.log(selected, selectedRows, changeRows); } })); ``` 上述代码展示了如何监听不同类型的选取变化，并打印相关信息至控制台以便调试。 #### 完整示例 下面是一个完整的例子展示怎样在一个基于 Vue3 和 Ant Design 的项目里创建带有选中行特性的表格： ```html <template> <div id="app"> <!-- 表格 --> <a-table :columns="columns" :data-source="dataSource" :pagination="false" :row-selection="getRowSelection" bordered /> <!-- 显示已选中的项 --> <p>Selected Items:</p> <ul v-if="selectedRowKeys.length > 0"> <li v-for="(key, index) in selectedRowKeys" :key="index">{{ key }}</li> </ul> </div> </template> <script setup lang="ts"> import { ref, reactive, toRefs, computed } from 'vue'; // 数据源模拟 let dataSource = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, ]; // 列定义 const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ]; // 存储被选中的行 ID 数组 const state = reactive({ selectedRowKeys: [] as string[], }); // 获取当前的 rowSelection 设置 const getRowSelection = computed(() => ({ type: 'checkbox', selectedRowKeys: state.selectedRowKeys, onChange: (selectedRowKeys: any[]) => { state.selectedRowKeys = selectedRowKeys; }, })); export default defineComponent({ ...toRefs(state), }); </script> ``` 这段代码实现了基本的行选择功能，并且能够动态更新页面上显示的选定条目列表。当用户点击某一行时，它会被自动加入到已经选中的集合当中；如果再次点击，则会取消对该行的选择状态。