ant design vue2表格添加复选框

在 Ant Design Vue2 表格中添加复选框，可以使用 `a-checkbox` 组件和 `rowSelection` 属性。以下是一个示例代码：

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

<script>
export default {
  data() {
    return {
      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',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      columns: [
        {
          title: '',
          dataIndex: '',
          key: '',
          scopedSlots: { customRender: 'selection' },
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      selectedRowKeys: [],
    };
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      };
    },
  },
};
</script>

<style scoped>
.ant-checkbox-wrapper {
  display: block;
}
</style>

在上面的示例代码中，我们将 `a-checkbox` 组件添加到表格的第一列，并将其设置为作为一个插槽的自定义渲染函数。然后我们使用 `rowSelection` 属性来启用行选择功能，并将其设置为一个对象，该对象包含一个 `selectedRowKeys` 属性，这是一个数组，其中包含当前选定行的keys，以及一个 `onChange` 属性，该属性是一个回调函数，它会在选择行时触发，并更新当前选定行的keys。最后，我们添加了一些样式来显示每个复选框。