antd vue 表格 checkbox

Ant Design Vue（简称“antdv”）是一个基于Vue.js的Ant Design实现，它提供了一套丰富的UI组件库，包括表格(Table)组件。如果你想在Ant Design Vue的表格中添加复选框(checkbox)，你可以按照以下步骤操作：

1. 引入组件：首先，在你的Vue文件中导入`<a-table>`和`<a-checkbox>`组件。

   <template>
     <a-table :columns="columns" :data-source="data">
       <!-- ... -->
     </a-table>
   </template>

   <script>
   import { Table, Checkbox } from 'ant-design-vue';
   export default {
     components: {
       Table,
       Checkbox,
     },
     //...
   }
   </script>

2. 定义列配置：在`columns`数组中，每个列可以包含一个`formatter`属性，用于自定义单元格内容。在这里，你可以创建一个函数来渲染复选框。

   const columns = [
     {
       title: '选择',
       dataIndex: 'selected', // 假设数据字段名是'selected'
       width: 50,
       render: (text, record) => (
         <Checkbox
           v-model={record.selected}
           @change={(checked) => handleCheckboxChange(record, checked)}
         />
       ),
     },
     // 其他列配置...
   ];

   function handleCheckboxChange(record, checked) {
     // 当复选框状态变化时，可以在此处理逻辑，比如更新数据状态
   }

3. 数据绑定：确保数据源`data`中的每一项都有对应的`selected`属性，初始值可以根据需求设置。