问题: 省市区 三级联动, 只有俩级联动,页面刷新,数据回显失效
解决方案: 源码,可以发现只需要传入Object数据即可,如:this.$refs.xxx.panel.lazyLoad(val)。
// 省市区三级联动
addressProps: {
label: 'dictName',
value: 'dictName',
lazy: true,
lazyLoad(node, resolve) {
const {
level
} = node
// 3级节点不再继续加载,直接作为叶子
if (level == 3) {
node.leaf = 'leaf'
resolve()
}
// 0级代表初始化
if (level == 0) {
self.searchAddress({
code: '1001'
}).then((res) => {
resolve(res)
})
} else {
self.searchAddress({
pid: node.data.id
}).then((res) => {
// 如果1级节点或2级节点查询后无查询后无数据,证明是叶子节点
if (!res) {
node.leaf = 'leaf'
resolve()
// 如果是2级节点,子节点是叶子节点
} else if (level == 2) {
res.forEach((item) => {
item.leaf = 'leaf'
})
}
resolve(res)
}).finally(() => {
self.$refs.cascader.computePresentText();
self.$refs.cascader1.computePresentText();
self.$refs.cascader2.computePresentText();
const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
Array.from($el).map(item => item.removeAttribute("aria-owns"));
})
}
}
},
或者
<template>
<div id="app">
<el-cascader v-model="current":props="props"ref="cascader"></el-cascader>
</div>
</template>
<script>
let id = 0;
let list = [
{
value: '0',
}, {
value: '1',
}, {
value: '2',
}, {
value: '3',
},
]
export default{
name: 'App',
data() {
return{
current: [],
props: {
lazy: true,
lazyLoad(node, resolve) {
const {level} = node;
functionf() {
list = list.map((item, i) => ({
label: level ? `${node.value}-${i}` : item.value,
value: level ? `${node.value}-${i}` : item.value,
leaf: item.value === '2'&& level === 0 ? true: `${node.value}-${i}` === '3-2'? true: level >= 2
}))
resolve(list)
}
if(level > 0) {
setTimeout(() => {
f()
node.func && node.func(node)
}, 1000)
return
}
f()
}
}
};
},
mounted() {
this.current = ['1', '1-3', '1-3-0']
// this.current = ['3', '3-2']
// this.current = ['2']
// this.current = ['0', '0-2', '0-2-3']
for(let item of this.$refs.cascader.panel.menus[0]) {
if(item.value === this.current[0]) {
this.loadItem(item)
return
}
}
},
methods: {
handleItem(val) {
if(val && val instanceofObject) {
this.loadItem(val)
}
},
loadItem(val) {
val.func = this.waitItemExecution
this.$refs.cascader.panel.lazyLoad(val)
},
waitItemExecution(val) {
for(let item of val.children) {
if(this.current[val.level] === item.value) {
this.handleItem(item)
break
}
}
this.$refs.cascader.panel.handleExpand(val)
this.$refs.cascader.computePresentText()
},
}
}
</script>