星月前端博客

隐藏antd Table的选择框 单选和复选以及点击当前行选中

8/1/2023 js

# 隐藏antd Table的选择框 单选和复选以及点击当前行选中

       <!-- 不是多选表格(隐藏的单选) -->
        <a-table :columns="columns"
                 :pagination="false"
                 :footer="() => `数量：共 ${dataList.length} 条`"
                 :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onRadioRowSelect, getCheckboxProps: onGetCheckboxPropsRadio, columnWidth: 0 }"
                 :data-source="dataList"
                 :customRow="handleClickRow">
          <template slot="text"
                    slot-scope="text, record">
            <span>{{ record.text }}</span>
            <a-tag v-if="record.status === isSubmittedAuditAdjust && record.nums !== 0"
                   class="ml-2"
                   color="red">
              修改{{ record.nums }}
            </a-tag>
          </template>
        </a-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# ant api文档的的rowSelection

在这里插入图片描述

// html主要代码：
// :rowSelection="{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: onRadioRowSelect, getCheckboxProps: onGetCheckboxPropsRadio, columnWidth: 0 }"

/**
   * 单选表格点击事件
   * @param selectedRowKeys 当前选中的行的id总汇数组
   * @param selectedRows 当前选中的行的数据总汇数组
   */
  onRadioRowSelect(selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys;
    this.currentIdList = selectedRowKeys;
    this.selectedRows = selectedRows;
    this.onClickList(selectedRows[0]);
  }

 /**
   * 单选表格隐藏的checkbox
   * @param record 当前行
   */
  onGetCheckboxPropsRadio(record) {
    return {
      props: {
        disabled: false,
      },
      style: {
        display: 'none',
      },
    };
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这里插入图片描述 在这里插入图片描述