Cascader 级联选择器如何实现自定义数据？所有的数据都由请求后端而来？

前提：

最近得了一个 需求，在下拉框变为级联选择器，数据由后端请求而来，同时间后端的接口是分别单独请求的，并没有给我任何类似于树结构的是否叶子节点的东西，故不管是父级子集或者孙级，都得走分别的请求接口，他们之间唯一的联系就是孙级的pid是子级的id，同理，子级的pid是父级的id

思路：

既然是分别给我的不同的接口返回的，那就先全部请求出来，再逐级循环，分别把pid和相对应父级id做对应

代码：

html：

<template>
	<div class="tbMachineinfo-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
			<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
				<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="XL名称" readonly="true">
							<el-cascader  v-model="Linevalue" :options="options" @change="handleChange" />
						</el-form-item>
					</el-col>
</el-row>
</el-form>
</el-dialog>
	</div>
</template>

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特此记录