You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

React Ant Design Table中如何基于当前选中的行禁用指定行?

React Ant Design Table中如何基于当前选中的行禁用指定行?

嘿,我刚好处理过类似的需求,其实要实现基于当前选中行来禁用指定行的功能,核心就是用好Antd Table rowSelection配置里的getCheckboxProps回调,结合已选中的行状态来动态控制。

首先,先把你的代码补全并优化一下,关键逻辑都在getCheckboxProps里,我们可以根据自己的业务规则,判断当前行的复选框是否需要被禁用:

import { Table } from 'antd';
import type { TableRowSelection } from 'antd';
import { useState } from 'react';

// 完善你的数据接口,记得加key字段,Table的行需要唯一标识
interface DataType {
  color: string;
  name: string;
  key: React.Key;
}

// 模拟你的数据源
const tableData: DataType[] = [
  { key: '1', color: 'red', name: '红苹果' },
  { key: '2', color: 'blue', name: '蓝浆果' },
  { key: '3', color: 'red', name: '红草莓' },
  { key: '4', color: 'blue', name: '蓝风铃' },
];

export default function SelectControlledTable() {
  // 已选中行的key集合
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 选中变化时更新状态
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  // 根据选中的key,筛选出对应的行数据,方便后续判断规则
  const selectedRows = tableData.filter(item => selectedRowKeys.includes(item.key));

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: (record) => {
      // 这里可以自定义你的禁用规则,举个例子:
      // 如果已选中了任意红色的行,就禁用所有蓝色的行
      const hasSelectedRedRow = selectedRows.some(row => row.color === 'red');
      // 注意要排除已选中的行,否则已选的行被禁用后无法取消选择
      const isCurrentRowSelected = selectedRowKeys.includes(record.key);
      const shouldDisable = hasSelectedRedRow && record.color === 'blue' && !isCurrentRowSelected;

      return {
        disabled: shouldDisable,
      };
    },
  };

  // 表格列配置
  const columns = [
    { title: '颜色', dataIndex: 'color', key: 'color' },
    { title: '名称', dataIndex: 'name', key: 'name' },
  ];

  return <Table rowSelection={rowSelection} columns={columns} dataSource={tableData} />;
}

你可以根据自己的实际业务需求,修改getCheckboxProps里的shouldDisable逻辑:

  • 比如想实现「选中某一行后,禁用所有和它名称相同的其他行」,可以把判断逻辑改成:

    const hasSameNameInSelected = selectedRows.some(
      row => row.name === record.name && row.key !== record.key
    );
    const shouldDisable = hasSameNameInSelected;
    
  • 再比如「选中行数超过3个时,禁用所有未选中的行」:

    const shouldDisable = selectedRowKeys.length >= 3 && !selectedRowKeys.includes(record.key);
    

核心思路就是:通过getCheckboxProps拿到当前行的record数据,再结合已选中的selectedRowKeysselectedRows,动态计算当前行复选框的disabled属性。

备注:内容来源于stack exchange,提问作者codesoft

火山引擎 最新活动