antd vue 表格rowSelection选择框功能的使用方式

关于“antd vue 表格rowSelection选择框功能的使用方式”，以下是详细的攻略：

1. 引入antd vue表格和rowSelection

首先，我们需要在代码中引入antd vue表格和rowSelection选择框，具体方法如下：

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

<script>
import { Table } from 'ant-design-vue';

export default {
  components: { ... },
  data() {
    return {
      columns: [...],
      data: [...],
      rowSelection: {
        type: 'checkbox'
      }
    }
  }
}
</script>

在代码中，我们通过import { Table } from 'ant-design-vue'引入了antd vue表格，然后在模板中使用<a-table></a-table>标签代替普通表格标签。在<a-table>标签中，我们使用:columns、:data-source、:row-key绑定表格的列、数据源和行key，其中:row-key有默认值，如果数据项的属性为"id"，则直接使用这个属性作为key。

同时，我们在data中添加了一个属性rowSelection，用于控制行选择框的显示和隐藏，其中type表示我们需要使用的选择框类型，这里我们选择了普通的checkbox选择框。

2. 实现全选和反选函数

在完成表格和选择框的基本设置后，我们需要添加全选和反选的函数，具体代码如下：

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :row-key="record => record.id"
    :row-selection="rowSelection"
  />
  <div>
    <a-button @click="selectAll">全选</a-button>
    <a-button @click="deselectAll">反选</a-button>
  </div>
</template>

<script>
import { Table, Button } from 'ant-design-vue';

export default {
  components: { ... },
  data() {
    return {
      columns: [...],
      data: [...],
      rowSelection: {
        type: 'checkbox'
      },
      selectedRowKeys: []
    }
  },
  methods: {
    // 全选
    selectAll() {
      this.selectedRowKeys = this.data.map(item => item.id);
    },
    // 反选
    deselectAll() {
      this.selectedRowKeys = this.data.filter(item => !this.selectedRowKeys.includes(item.id)).map(item => item.id);
    }
  }
}
</script>

在代码中，我们使用了两个按钮，分别绑定了selectAll()、deselectAll()两个方法。这两个方法是实现全选和反选的关键。在selectAll()方法中，我们通过this.data.map(item => item.id)获取了数据中所有的id值，即选中全部数据。在deselectAll()方法中，我们使用this.data.filter(item => !this.selectedRowKeys.includes(item.id)).map(item => item.id)获取了未选中的数据的id值，即对当前已选中的数据进行取反操作。

3. 一个完整的实例

对于上述的攻略，以下代码展示了一个完整的antd vue表格和rowSelection选择框的示例：

<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :row-key="record => record.id"
      :row-selection="rowSelection"
    />
    <div>
      <a-button @click="selectAll">全选</a-button>
      <a-button @click="deselectAll">反选</a-button>
    </div>
  </div>
</template>

<script>
import { Table, Button } from 'ant-design-vue';

export default {
  components: { ... },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '性别',
          dataIndex: 'gender'
        }
      ],
      data: [
        {
          id: 1,
          name: '张三',
          age: 20,
          gender: '男'
        },
        {
          id: 2,
          name: '李四',
          age: 25,
          gender: '女'
        },
        {
          id: 3,
          name: '王五',
          age: 30,
          gender: '男'
        },
        {
          id: 4,
          name: '赵六',
          age: 28,
          gender: '女'
        }
      ],
      rowSelection: {
        type: 'checkbox'
      },
      selectedRowKeys: []
    }
  },
  methods: {
    // 全选
    selectAll() {
      this.selectedRowKeys = this.data.map(item => item.id);
    },
    // 反选
    deselectAll() {
      this.selectedRowKeys = this.data.filter(item => !this.selectedRowKeys.includes(item.id)).map(item => item.id);
    }
  }
}
</script>

这是一个简单的示例，包含了表格、选择框、全选和反选四个关键的部分。在实际开发中，我们可以根据业务需求对代码进行定制化修改，以实现更加丰富和具有工作性的功能。