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

Dark_programmer

已于 2023-06-13 10:20:50 修改

阅读量2.8k

点赞数 1

分类专栏： antd-vue 文章标签：前端 vue.js

于 2023-05-08 17:26:51 首次发布

本文链接：https://blog.youkuaiyun.com/Dark_programmer/article/details/130563529

版权

antd-vue 专栏收录该内容

16 篇文章

订阅专栏

本文展示了如何在AntdVuetable中设置rowKey、rowSelection以及使用onChange和getCheckboxProps方法。文章提到了两种处理特殊需求的方法，包括通过切换CSS类隐藏选择框和在row-selection配置中动态判断是否显示选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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时即可