table勾选

<template>
<a-card>
  <a-table  :columns="columns" :data-source="data" rowKey="id"
  :rowSelection="rowSelection"/>
</a-card>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    id:i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default {
  data() {
    return {
      data,
      columns,
      selected: [],// 已勾选的行数据
      selectedRowKeys: [], // 已勾选的行key数组
    };
  },
  computed: {
    rowSelection() {
        return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: selectedRowKeys => {
                this.selectedRowKeys = selectedRowKeys;
            },
             onSelect: (record, isSelected) => {
                 if (isSelected) {
                     this.selected.push(record);
                 } else {
                     this.selected = this.selected.filter(i => i.id !== record.id);
                 }
             },
             // onSelectAll onSelect 分别为跨页全选和勾选的逻辑
            onSelectAll: (isSelected, selectedRows, changedRows) => {
                if (isSelected) {
                    //this.selected 
                    this.selectedRowKeys = [...Array(46).keys()];//[...this.selected, ...selectedRows];
                } else {
                    this.selectedRowKeys = []
                }
             },
        };
    },
  },
  methods: {
  },
};
</script>



<style lass="scss" scoped>
</style>