[t-cascader 级联选择器]动态加载初始值设置选中并触发接口请求方法

结合选择省市区案例，选用t-cascader 级联选择器，方式是动态加载。可见图

	<t-form-item label="省市区" name="cascaderData">
						<t-cascader ref="cascaderRef" v-model="cascaderData" :options="options" clearable filterable value-type="full" :load="load" @change="onChange">
						</t-cascader>
					</t-form-item>

我在使用该组件的时候，因为我的是动态加载方式， 设置 cascaderData 的时候，发现他并不会主动触发 load 加载函数。所以数据没加载出来，选项框就不能自动选中。

针对此，我的想法是从 options 出发。

options

Array

[]

可选项数据源。TS 类型：Array<CascaderOption>

构建 loadCascader 函数。

const loadCascader = async (listData) => {  
    if (!listData || listData.length < 3) {  
        throw new Error("Invalid listData: must contain at least 3 elements");  
    }  
  
    let apiData = [];  
    let [provinceCode, cityCode, areaCode] = listData; // 解构赋值，提高代码可读性  
  
    // 异步加载各级数据  
    const [ProvinceList, CityList, AreaList] = await Promise.all([  
        load({ level: 0 - 1, data: { value: provinceCode } }),  
        load({ level: 1 - 1, data: { value: cityCode } }),  
        load({ level: 2 - 1, data: { value: areaCode } })  
    ]);  
  
    // 查找各层级的索引  
    const ProvinceIndex = ProvinceList.findIndex(item => item.value === provinceCode);  
    const CityIndex = CityList.findIndex(item => item.value === cityCode);  
    const AreaIndex = AreaList.findIndex(item => item.value === areaCode);  
  
    // 检查索引是否有效  
    if (ProvinceIndex === -1 || CityIndex === -1 || AreaIndex === -1) {  
        throw new Error("Failed to find all required indices in the loaded data");  
    }  
  
    // 构建层级关系  
    // 注意：这里我们假设ProvinceList和CityList中的元素初始时没有children属性  
    // 或者即使有，我们也可以覆盖它（如果这是您的需求）  
    
    CityList[CityIndex].children =AreaList; 
    ProvinceList[ProvinceIndex].children = CityList; 

    // CityList[CityIndex].children = AreaList
    
    // ProvinceList[ProvinceIndex].children = CityList
    // console.log("ProvinceList", ProvinceList)
    // options.value = ProvinceList

    // 返回最终的省级数据结构  
    return ProvinceList;  
};  
  
// 示例调用  
loadCascader(["440000000000", "440300000000", "440305000000"])  
    .then(result => {  
        console.log(result);  
    })  
    .catch(error => {  
        console.error(error);  
    });  
  
// 注意：确保load函数能够正确处理传入的level和data，并返回相应的数据




const openDialog = async (context) => {
	visible.value = true;

	let testData = ["440000000000", "440300000000", "440305000000"]
	// // 示例调用
	options.value  = await loadCascader(testData);
	cascaderData.value = testData;

};

load 接口函数，仅供参考。

示例效果图