前端界面搜索部分，第一个选择框的值，影响第二个选择框的值

1.字段声明

{
      title: '单位名称',
      dataIndex: 'departmentId',
      align: 'center',
      width: 100,
      hideInTable: true,
      renderFormItem: (item, { defaultRender, ...rest }) => (
        <ProFormSelect
          name="departmentId"
          // label="单位名称"
          options={hospitaltData}
          onChange={handleFirstSelectChange}
          {...rest}
        />
      ),
    },
 {
      // title: '设备名称',
      dataIndex: 'equipmentId',
      hideInTable: true,
      renderFormItem: (item, { defaultRender, ...rest }) => (
        <ProFormSelect
          name="equipmentId"
          rules={[{ required: true, message: '请选择设备名称' }]}
          label="设备名称"
          options={dataTree}
          onChange={handleSecondSelectChange}
          {...rest}
        />
      ),
    },
{
      title: '部件名称',
      dataIndex: 'partId',
      width: 100,
      align: 'center',
      // hideInTable: true,
      renderFormItem: (item, { defaultRender, ...rest }) => (
        <ProFormSelect
          name="partId"
          // label="件名称"
          options={partData}
          {...rest}
        />
      ),
      render: (_, record) => {
        return findNameBypart(record?.partId);
      },
    },

2.数据来源

  const findAllorganizatioData = async () => {
    const result = await organizationNameList();
    const treeData = result.data.map((item: any) => ({
      value: item.id,
      label: item.name,
    }));
    setHospitaltData(treeData);
  };

  const fetchData = async (id: any) => {
    const result = await findByDepartmentId(id);
    const treeData = result.data.map((item: any) => ({
      value: item.id,
      label: item.name,
    }));
    setDataTree(treeData);
  };

const findPartData = async (id: any) => {
    const result = await equipmentListById(id);
    const params = result.data[0];
    const partdata = params.siteDtoList?.map((item: any) => ({
      value: item.id,
      label: item.name,
    }));
    setPartData(partdata);
  };

3.监听选择框变化，触发事件

  // 监听第一个选择框的变化
  const handleFirstSelectChange = (value: any) => {
    fetchData(value);
    form.setFieldsValue({ equipmentId: undefined, partId: undefined });
  };

 // 监听第一个选择框的变化
  const handleSecondSelectChange = (value: any) => {
    findPartData(value);
    form.setFieldsValue({ partId: undefined });
  };

原文地址：https://blog.csdn.net/qq_43284411/article/details/142355157

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！