antd全选时如何只选择CheckBox为true的

Question

antd vue3版本，全选时，将禁用的也给选上了，如何全选时去掉禁用的？

代码如下

<div>
<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys"  @expand="handleExpand"/>
</div>

<script lang="ts" name="production-salesOrder" setup>
   //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '销售订单',
           api: list,
           columns,
           canResize:false,
           formConfig: {
                //labelWidth: 120,
                schemas: searchFormSchema,
                autoSubmitOnEnter:true,
                showAdvancedButton:true,
                fieldMapToNumber: [
                ],
                fieldMapToTime: [
                ],
            },
           actionColumn: {
               width: 160,
               fixed:'right'
           },
        beforeFetch(params) {
          params.code = mainId.value;
        },
        rowSelection:{
          type: 'checkbox',
          getCheckboxProps(record: Recordable) {
            if (record.approveStatus !== '1' || record.orderStatus !=='1') {
              return { disabled: true };
            } else {
              return { disabled: false };
            }
          },
        }
        },
        exportConfig: {
            name:"销售订单",
            url: getExportUrl,
        },
        importConfig: {
            url: getImportUrl,
            success: handleSuccess
        },
    })
</script>

Answer 1

【以下回答由 GPT 生成】

可以通过以下步骤来解决该问题:

1. 首先，在rowSelection对象中添加一个selectedRowKeys属性，并将其值设置为空数组。这将用于存储选择的行的keys。

rowSelection: {
  type: 'checkbox',
  selectedRowKeys: [],
  getCheckboxProps(record: Recordable) {
    if (record.approveStatus !== '1' || record.orderStatus !== '1') {
      return { disabled: true };
    } else {
      return { disabled: false };
    }
  },
},

1. 然后，修改getCheckboxProps方法，将禁用的选项从selectedRowKeys中移除。

rowSelection: {
  type: 'checkbox',
  selectedRowKeys: [],
  getCheckboxProps(record: Recordable) {
    if (record.approveStatus !== '1' || record.orderStatus !== '1') {
      const index = rowSelection.selectedRowKeys.indexOf(record.key);
      if (index > -1) {
        rowSelection.selectedRowKeys.splice(index, 1);
      }
      return { disabled: true };
    } else {
      return { disabled: false };
    }
  },
},

1. 接下来，添加一个onChange事件处理函数，用于更新selectedRowKeys数组。

rowSelection: {
  type: 'checkbox',
  selectedRowKeys: [],
  getCheckboxProps(record: Recordable) {
    if (record.approveStatus !== '1' || record.orderStatus !== '1') {
      const index = rowSelection.selectedRowKeys.indexOf(record.key);
      if (index > -1) {
        rowSelection.selectedRowKeys.splice(index, 1);
      }
      return { disabled: true };
    } else {
      return { disabled: false };
    }
  },
  onChange(selectedRowKeys: string[] | number[]) {
    rowSelection.selectedRowKeys = selectedRowKeys;
  }
},

1. 最后，在模板中使用selectedRowKeys数组。

<div>
  <BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand"/>
</div>

这样，当用户选择某个CheckBox时，只有值为true且未被禁用的选项会被添加到selectedRowKeys数组中。

【相关推荐】

• 你可以参考下这篇文章：前端组装antd中checkBox格式数据问题以及字符串转对象
• 除此之外, 这篇博客: ant design vue实现穿梭框单选中的 4.2修改样式去掉全选checkbox 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^