ant-design-vue获取table复选框勾选行数据

1、版本1

onSelect、onSelectAll事件并用获取 勾选数组对象

<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :row-key="(record) => record.id"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        onSelect: onSelect,
        onSelectAll: onSelectAll,
      }"
    ></a-table>
  </div>
</template>

<script>
import { AddLimsPointPageData } from '@/services/LIMSApis/nodeConfig'

export default {
  name: 'index',
  data() {
    return {
      // 选中行id数组
      selectedRowKeys: [],
      // 选中行-对象数组
      selectedRows: [],
      dataSource: [],
      columns: [
        {
          title: '编码',
          dataIndex: 'code',
          align: 'center',
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    this.AddLimsPointPage()
  },
  methods: {
    async AddLimsPointPage() {
      let res = await AddLimsPointPageData(this.params)
      this.dataSource = res.data
    },
    // 勾选触发的函数
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * 表格单选事件
     * @param record 行数据
     * @param selected 是否选中
     */
    onSelect(record, selected) {
      // 若选中，直接push
      if (selected) {
        this.selectedRows.push(record)
      } else {
        // 若取消选中，则查找到这条数据删除
        let index = this.selectedRows.findIndex((item) => item.id == record.id)
        if (index >= 0) {
          this.selectedRows.splice(index, 1)
        }
      }
    },
    /**
     * 表格多选事件
     * @param selected     是否选中
     * @param selectedRows 忘记了，当时没用到
     * @param changeRows   变化行数据
     */
    onSelectAll(selected, selectedRows, changeRows) {
      // 若选中，直接push
      if (selected) {
        // 单选中部分几条数据，此时点击全选，将 changeRows 剩下的几条为选中数据选中
        this.selectedRows = this.selectedRows.concat(changeRows)
      } else {
        // 若取消选中，则为空
        this.selectedRows = []
      }
    },
  },
}
</script>

2、版本2

单用onChange事件获取 勾选数组对象

<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :row-key="(record) => record.id"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    ></a-table>
  </div>
</template>

<script>
import { AddLimsPointPageData } from '@/services/LIMSApis/nodeConfig'

export default {
  name: 'index1',
  data() {
    return {
      // 选中行id数组
      selectedRowKeys: [],
      // 选中行-对象数组
      selectedRows: [],
      dataSource: [],
      columns: [
        {
          title: '编码',
          dataIndex: 'code',
          align: 'center',
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    this.AddLimsPointPage()
  },
  methods: {
    async AddLimsPointPage() {
      let res = await AddLimsPointPageData(this.params)
      this.dataSource = res.data
    },
    /**
     * 表格选中方法
     * @param selectedRowKeys 当前选中表格的id数组
     * @param selectedRows 当前选中表格的对象数组
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      // 1、单选中某条数据进入
      if (selectedRowKeys.length === 1) {
        // 4、当前两条数据选中，取消一条选中进入
        if (this.selectedRows.includes(selectedRows[0])) {
          this.selectedRows = this.selectedRows.filter(
            (item) => item.id === selectedRows[0].id
          )
          this.selectedRowKeys = this.selectedRowKeys.filter(
            (item) => item === selectedRows[0].id
          )
        } else {
          // 2、直接push
          this.selectedRows.push(selectedRows[0])
          this.selectedRowKeys.push(selectedRows[0].id)
        }
      } else {
        // 3、再选中某数据，或全选、全不选进入
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    },
  },
}
</script>