ant design vue表格多选

在Ant Design Vue中，可以使用`rowSelection`属性来实现表格多选功能。具体步骤如下：

1. 在表格组件中添加`rowSelection`属性，并设置`type`为`checkbox`，表示使用复选框来进行多选。

2. 在`rowSelection`属性中，设置`selectedRowKeys`为一个数组，用于存储当前选中的行的`key`值。

3. 在表格的列定义中，添加一列用于显示复选框，并设置`customRender`属性为一个函数，用于自定义复选框的显示和选中状态。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      dataSource: [
        { id: 1, name: 'John', age: 18 },
        { id: 2, name: 'Mike', age: 22 },
        { id: 3, name: 'Lucy', age: 20 }
      ],
      selectedRowKeys: []
    }
  },
  computed: {
    rowSelection() {
      return {
        type: 'checkbox',
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleSelectChange
      }
    },
    columns() {
      return [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: 'Name',
          dataIndex: 'name'
        },
        {
          title: 'Age',
          dataIndex: 'age'
        },
        {
          title: 'Select',
          customRender: (text, record) => {
            const isSelected = this.selectedRowKeys.includes(record.id)
            return <a-checkbox checked={isSelected} onChange={() => this.handleRowSelect(record)}></a-checkbox>
          }
        }
      ]
    }
  },
  methods: {
    handleRowSelect(record) {
      const { id } = record
      const index = this.selectedRowKeys.indexOf(id)
      if (index > -1) {
        this.selectedRowKeys.splice(index, 1)
      } else {
        this.selectedRowKeys.push(id)
      }
    },
    handleSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>