antd-vue - - - - - row-selection的使用

1. 正常需求使用

antd-vue table
官方示例代码如下：

<template>
  <a-table :rowKey="record=>record.id" :row-selection="rowSelection" :columns="columns" :data-source="data">
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a>{
   
   { text }}</a>
      </template>
    </template>
  </a-table>
</template>
<script>
import {
      
       defineComponent } from 'vue';
const columns = [{
      
      
  title: 'Name',
  dataIndex: 'name',
}, {
      
      
  title: 'Age',
  dataIndex: 'age',
}, {
      
      
  title: 'Address',
  dataIndex: 'address',
}];
const data = [{
      
      
  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',
}, {
      
      
  key: '4',
  name: 'Disabled User',
  age: 99,
  address: 'Sidney No. 1 Lake Park',
}];
export default defineComponent({
      
      
  setup() {
      
      
    const rowSelection = {
      
      
      onChange: (selectedRowKeys, selectedRows) => {
      
      
        console.log(`selectedRowKeys: ${ 
        selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      getCheckboxProps: record => ({
      
      
        disabled: record.name === 'lee', // name为lee的行，禁止选中
        // Column configuration not to be checked
        name: record.name,
      }),
    };
    return {
      
      
      data,
      columns,
      rowSelection,
    };
  },
});
</script>

关键点如下：

• rowKey为选中行的关键字，必须要配置！！！！！！
• table标签上配置row-selection配置项
• 在row-selection配置项内需包含onChange& getCheckboxProps

2. 特殊需求使用

需要动态切换是否展示table的选择框

2.1 治标办法

动态切换class，样式如下

.ant-table-selection-column {
    
    
  display: none;
}

2.2 治本办法

在配置row-selection时多一步判断，如：
:row-selection="inner ? rowSelection : undefined"

当将其值设为undefined时即可