// 第二级
const [guardParams, setGuardarams] = useState([]);
const { data: selectSecondData, loading: selectSecondLoading, run: selectSecondRun, error: selectSecondError } = useRequest(selectSecond, {
manual: true,
onSuccess: res => {
setGuardarams(res.data.list);
},
});
if (selectSecondError) {
message.error(selectSecondError);
}
// 第三级
const [modelParams, setModelarams] = useState([]);
const { data: selectThirdData, loading: selectThirdLoading, run: selectThirdRun, error: selectThirddError } = useRequest(selectThird, {
manual: true,
onSuccess: res => {
setModelarams(res.data.list);
},
});
if (selectThirddError) {
message.error(selectThirddError);
}
const secondData = selectSecondData?.data.list
const thirdData = selectThirdData?.data.list
const loadData = (selectedOptions: any) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
const id = targetOption.value;
if(selectedOptions.length === 1) {
selectSecondRun(id);
if( secondData !== undefined) {
targetOption.children = [];
secondData.forEach((element: any) => {
targetOption.children.push({
"value": element.id,
"label": element.name,
"isLeaf": false,
})
});
setAppParams(targetOption)
}else{
console.log("hahahha")
}
} else if(selectedOptions.length === 2) {
selectThirdRun(id)
targetOption.children = [];
if(thirdData !== undefined) {
thirdData.forEach((element: any) => {
targetOption.children.push({
"value": element.id,
"label": element.name,
"isLeaf": true,
})
});
setAppParams(targetOption)
}
}
};
###
可以在onChange
的function里面进行children的数据新增,在loadData
的function做loading效果的处理即可。
下面是部分代码:
options
为一级数据。
const [options, setOptions] = useState();
<Cascader
options={options}
loadData={loadDataFunc}
onChange={setVisionsFunc}
changeOnSelect
/>
const loadDataFunc = selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
setTimeout(() => {
targetOption.loading = false;
setOptions(options);
}, 100);
};
const setVisionsFunc = async selectedOptions => {
if (selectedOptions.length === 1) {
const options_temp = [...options];
const res = await 二级数据接口(selectedOptions[0]);
const children: Array<object> = [];
res.map(pro => {
children.push({ label: pro.name, value: pro.code, isLeaf: false });
return true;
});
options_temp.find(_ => _.value === selectedOptions[0])['children'] = children;
setOptions(options_temp);
} else if (selectedOptions.length === 2) {
const apps = await 三级数据接口(selectedOptions[1]);
const options_temp = [...options];
const apps = await getDirectoryApp(selectedOptions[1]);
const children: Array<object> = [];
apps.map(pro => {
children.push({ label: pro.name, value: pro.code, isLeaf: true });
return true;
});
const product = options_temp.find(_ => _.value === selectedOptions[0]);
product.children.find(_ => _.value === selectedOptions[1])['children'] = children;
setOptions(options_temp);
}
};