ant design vue1.7 表格添加复选框

您好，Ant Design Vue 1.7 中的 Table 组件同样也支持添加复选框来实现选中多行数据的功能。具体步骤如下：

1. 在 Table 组件中增加 `rowSelection` 属性，该属性的值为一个对象，其中 `type` 属性指定选择类型（可以为 `'checkbox'` 或者 `'radio'`），`selectedRowKeys` 属性指定已选中的行的 key 值组成的数组，`onChange` 属性指定选择变化时的回调函数。

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="rowSelection"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // 列定义
      ],
      dataSource: [
        // 数据源
      ],
      rowSelection: {
        type: 'checkbox', // 选择类型
        selectedRowKeys: [], // 已选中的行的 key 值组成的数组
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
        }
      }
    }
  }
}
</script>

2. 在 Table 组件中的列定义中增加一列，使用 `render` 属性来渲染 Checkbox 组件。

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="rowSelection"></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // 其他列
        {
          title: '选择',
          dataIndex: 'id',
          key: 'id',
          render: (text, record) => {
            return <a-checkbox value={record.id}></a-checkbox>
          }
        }
      ],
      dataSource: [
        // 数据源
      ],
      rowSelection: {
        type: 'checkbox', // 选择类型
        selectedRowKeys: [], // 已选中的行的 key 值组成的数组
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
        }
      }
    }
  }
}
</script>

这样就可以在 Ant Design Vue 1.7 的 Table 组件中添加复选框了。希望能对您有所帮助！