前提： 最近得了一个 需求，在下拉框变为级联选择器，数据由后端请求而来，同时间后端的接口是分别单独请求的，并没有给我任何类似于树结构的是否叶子节点的东西，故不管是父级子集或者孙级，都得走分别的请求接口，他们之间唯一的联系就是孙级的pid是子级的id，同理，子级的pid是父级的id
思路： 既然是分别给我的不同的接口返回的，那就先全部请求出来，再逐级循环，分别把pid和相对应父级id做对应
代码： html：
js:const Linevalue = ref([]) const options = ref([])as any const handleChange = (value:any) => { console.log(value); } const tableParams = ref({ page: 1, pageSize: 10000, total: 0, }); //获取运维信息 const gettbBureau1 = async () => { const levedata = await getLevel(); const Linelist = await getLineInfoList(); //这是我自己的请求接口，你们只需要换成你们自己的即可 pagetbBureau({}).then((res: any) => { const tempOptions: { value: any; label: any; children: any[]; }[] = []; // 临时存储options数据的数组 res.data.result.items.forEach((item: any) => { const children: { value: any; label: any; children: any[]; }[] = []; // 存储子级数据的数组 levedata.forEach((item1: any) => { if (item1.pid == item.id) { const subChildren: { value: any; label: any; }[] = []; // 存储子级的子级数据的数组 Linelist.forEach((item2: any) => { if (item2.pid == item1.id) { subChildren.push({ value: item2.id, label: item2.name }); } }); children.push({ value: item1.value, label: item1.level, children: subChildren }); } }); tempOptions.push({ value: item.value, label: item.bureauName, children: children }); }); options.value = tempOptions; // 更新options数据 }); }; // 获取层级信息 const getLevel = async () => { try { //这是我自己的请求接口，你们只需要换成你们自己的即可 const res = await pagetbLinegrade({}); return res.data.result.items; } catch (error) { console.error('Error:', error); return []; }
} // 获取XL信息 const getLineInfoList = async () => { try { //这是我自己的请求接口，你们只需要换成你们自己的即可 const res = await pageTbLineInfo(Object.assign(tableParams.value)); return res.data.result.items; } catch (error) { console.error('Error:', error); return []; } }; 这样出来的options就都是后端给的数据啦，2024.4.10特此记录 ————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
