antdPro - ProTable 实现两个选择框联动效果

我们都是柠檬精诶

已于 2022-06-08 18:02:21 修改

阅读量3.4k

点赞数 2

分类专栏： antdPro 文章标签：前端 react typescript antdPro

于 2022-06-08 18:00:14 首次发布

本文链接：https://blog.csdn.net/qq_43392573/article/details/125189634

版权

antdPro 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现效果
1）正常情况下，a是正常状态，b是禁用的
在这里插入图片描述
2）当选择a时，会解除b的禁用状态，并且给b的选择框的下拉数据赋值

3）选择b，并清空a的值，应清空且禁用b，回归初始状态

4）点击“重置”，回归初始状态

在这里插入图片描述

关键代码：

......

const [eleValue, setEleValue] = useState<any>(undefined);  // b的值
const [labelDisabled, setLabelDisabled] = useState<boolean>(true); // b是否禁用
const [hideSearchLabel, setHideSearchLabel] = useState<string>(''); // b option取值
  
const columns: ProColumns<TableListItem>[] = [
      {
      title: 'a',
      dataIndex: 'domainCode',
      hideInTable: true,
      valueEnum: typeEnum,
      fieldProps: {
        placeholder: '请选择a',
        onChange: (val: any) => {
          setEleValue(undefined); // 1、当a改变时，会首先清空b选中的值或者遗留的警告信息；
          // 2、存在值，说明在选择a的下拉值，需要解除b的禁用状态；
          if (val) {
            setLabelDisabled(false);
          } else { // 3、值不存在，说明a选择框被清空了，需要重新变成禁用状态；
            setLabelDisabled(true);
          }
        },
      },
      search: {
        transform: (value) => {
          setHideSearchLabel(value); // 更新a的类型，方便b之后改变options的取值
          return { domainCode: value };
        },
      },
    },
    {
      title: 'b',
      dataIndex: 'elementLabel',
      ellipsis: true,
      valueEnum: elementEnum,
      fieldProps: {
        placeholder: '请选择b',
        onChange: (val: any) => {
          setEleValue(val); // 更新b的值
        },
      },
      renderFormItem: () => (
        <ProFormSelect
          wrapperCol={{ span: 24 }}
          disabled={labelDisabled}
          value={eleValue}
          options={
            // 根据a的类型取值
            hideSearchLabel === 'OFFICIAL_DOCUMENT'
              ? officialElementOption
              : hideSearchLabel === 'SERVICE_DOCUMENT'
              ? govServiceElementOption
              : []
          }
        />
      ),
    },
]
......