一:实现思路
定位原因:懒加载的级联下拉框无法回显是因为,只绑定了model的值,没有options的数据支撑的话,获取不到节点的内容导致;
方案:拿到选中的项的时候,用这些值去递归循环获取相应的节点的一些属性,赋值给options,然后注意最后一个节点的leaf属性一定要有且是true了才可以回显;
二:绑定了options还是没有回显的可能原因
2.1 赋值options的格式不对;
2.2 赋值的option里面最后一项没有加上 leaf:true,导致插件以为还有下级所以无法回显;
2.3 赋值的id数据类型和实际不一致,如果model里面的是字符串,option里面的id也要转换成字符串;
三:实现demo
// test.vue <template> <!-- 测试懒加载 --> <el-cascader :props="test_props" :options="test_options" v-model="test_model"></el-cascader> </template> <script> let id2 = 0; export default { data(){ return { test_options: [ //回显值得关键必须要把需要回显的都写到options里面,且最后一项要加上leaf:true,表示无下级了才可以回显;这里写死,实际要根绝接口返回的需要回显的数据,来递归循环到结果,赋值给这里; { value: '选项1', label: '选项1', children: [{ value: '选项3', label: '选项3', leaf: true }], }, { value: '选项2', label: '选项2', }, ], test_model: ['选项1', '选项3'],//模拟后台取到的默认值,这里是单选 test_props: { lazy: true, lazyLoad(node, resolve) { const { level } = node; setTimeout(() => { const nodes = Array.from({ length: 2 }) .map((item) => { ++id2 return { value: `选项${id2}`, label: `选项${id2}`, leaf: level >= 1, } }); // 通过调用resolve将子节点数据返回,通知组件数据加载完成 resolve(nodes); }, 1000);
} } } } </script>