首页a-table 多选

a-table 多选

时间: 2025-01-22 20:17:09 浏览: 43

### 关于 a-table 多选功能实现在 Ant Design Vue 中，`a-table` 组件支持多种交互方式，其中包括多选功能。为了启用此特性，在 `a-table` 的属性中设置 `rowSelection.type='checkbox'` 可以开启基于复选框的选择模式[^1]。下面是一个简单的例子来展示如何配置带有多个选择项的表格： ```vue <template> <a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="{ type: 'checkbox', onChange: handleSelectionChange }"> </a-table> </template> <script setup lang="ts"> import { ref, defineComponent } from 'vue'; const columns = [ { title: 'Name', dataIndex: 'name' }, // ... other column definitions ... ]; // 假设这是从 API 获取的数据源 const dataSource = ref([ { id: 0, name: 'John Brown' }, { id: 1, name: 'Jim Green' } ]); function handleSelectionChange(selectedRowKeys, selectedRows){ console.log(`Selected Rows Keys: ${selectedRowKeys}`, "Selected Rows:", selectedRows); } </script> ``` 当用户勾选或取消勾选某一行旁边的复选框时会触发 `onChange` 方法，并传递两个参数给该方法：一个是被选中的行键组成的数组 (`selectedRowKeys`)；另一个是由对应数据对象构成的列表 (`selectedRows`)。这允许开发者进一步处理这些选定记录的信息[^2]。

阅读全文