前端界面搜索部分,第一个选择框的值,影响第二个选择框的值
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)!