效果如下:
实现方式:
<el-cascader
ref="cascader"
v-model="form.province"
:options="options" 第一层数据
:placeholder="form.province2" 默认值回显,因为lazy懒加载,v-model回显不了
:props="props" 用于后几层数据的懒加载
/>
data(){
return{
const self = this
props: {
value: 'code',
label: 'name',
lazy: true,
lazyLoad(node, resolve) {
if (node.data) self.getChildArea(node, resolve)
}
}
}
}
methods:
getChildArea(node, resolve) {
let childProjects = []
getArea(接口参数).then(res => {
if (res.code == '200') {
childProjects = res.data
if (node.level > 1) {
for (const item of childProjects) {
item.leaf = true
}
}
resolve(childProjects)
}
})
}