2021-06-15

• 明确需求
• 查找问题原因
• 解决思路

明确需求

在网上也看了几篇类似的文章,大部分都看得自己迷迷糊糊的,直到看到了一篇文章后才开始修改自己的问题，但好在问题解决了。需求:类似省市区的数据回显(XX省/XX市/XX区),可以选择任意一级数据进行保存(XX省)

问题原因

因为数据除了一级节点外,其他节点数据都是懒加载(缓加载,动态加载)而来,根据Element官网的动态加载案列调整后,在编辑回显时,除一级节点外,无法找到对应的二三级节点;所以多级数据始终无法回显。(因为编辑回显时不能主动地触发lazyLoad方法获取二三级节点的数据);

<template>
	<el-cascader v-model="value" :options="options" :props="props"></el-cascader>
	// value选中的数据	options数据源(一级节点)	props动态加载的配置
</template>

<script>
  let id = 0;
  export default {
    data() {
      return {
      	value:["一级省","二级市","三级区"],// v-model 绑定数据源的label,
      	// value:["一级省"], // 只选择一级时数据可以回显,多级的无法回显
        props: {
          lazy: true,
          lazyLoad:this.lazyLoad,// 这里的lazyLoad方法就不写了(在这个方法里请求二三级数据)
          checkStrictly: true, // 是否严格的遵守父子节点不互相关联(可以选择任意一级)
          expandTrigger: 'hover',// 怎么触发加载二三级节点数据的方法
        },
        options:[{value: '0',label: '一级省',leaf: true}], // 大致的数据源结构,leaf是否有子节点
      };
    }
  };
</script>

解决思路

因为编辑回显时不能主动地触发 lazyLoad 方法获取二三级节点的数据(ps:如果有大神知道怎么获取的话可以直接修改);所以在数据渲染时修改 options 使数据内存在对应的节点的部分数据，使节点正常回显。

let value = this.value;
let options = this.options;
// 思路:根据已有数据生成新的数据源 循环方法可以根据需要进行调整 这里只是提供参考
if(value.length > 0) { // 当前有没有绑定数据 这里可以判断大于1,一级时数据可以回显
	for(let i = 0; i < value.length-1; i++) { // 循环 选中的数据
		for(let k = 0; k < options.length; k++) { // 循环 数据源
			if(value[i] == options[k].label) { // 找到数据源中 对应的一级数据(二级/三级数据)
				options[k].children = [{label: value[i+1],leaf: true}]; // 生成对应的二三级数据
				// leaf 这里可以根据当前绑定值的长度进行判断是否拥有子节点,
			}
		}
	}
}
// 这里执行完毕后将值赋值给options
// options = [
//	{
//		value: '0',
//		label: '一级省',
//		leaf: true,
//		children: [
//			{
//				label: '二级市',
//				leaf: true,
//				children: [
//					{
//						label: '三级区',
//						leaf: false,
//					}
//				]
//			}
//		]
//	}
// ]