<ElCascader
ref="cascader"
:key="key"
v-model="code"
clearable
filterable
:props="props"
/>
重点在于props,在js文件中进行定义
data(){
return {
props: {
//设置为懒加载的模式
lazy: true,
value: 'value',
expandTrigger: 'click',
lazyLoad(node, resolve) {
const { level, root, data } = node
//判断为根节点时入参queryType的值为0,deptCode为null
if (root) {
http
.post('/xx/xx', { deptCode: null, queryType: 0 })
.then((res) => {
const result = res.data.map((item) => ({
label: item.deptName,
value: item.deptCode,
//leaf标明节点是不是叶子节点,在这里表示当为第三级(即level为2时就是叶子节点,不会再调接口加载选项)
leaf: level >= 2,
}))
// 将结果resolve出去,result就是我们想要的数据
resolve(result)
})
.catch((res) => {
console.log(res)
})
} else {
http
.post('/iot/queryDepartments', {
deptCode: data.value,
queryType: 0,
})
.then((res) => {
const result = res.data.map((item) => ({
label: `${item.deptCode}${item.deptName}`,
value: item.deptCode
}))
resolve(result)
})
.catch((res) => {
console.log(res)
})
}
},
},
}
}
如果业务逻辑没那么复杂,只是点击选项就会调接口请求数据的话,
data(){
return {
props: {
//设置为懒加载的模式
lazy: true,
value: 'value',
expandTrigger: 'click',
lazyLoad(node, resolve) {
http
.post('/xx/xx', { xxx })
.then((res) => {
const result = res.data.map((item) => ({
label: item,
value: item,
}))
// 将结果resolve出去,result就是我们想要的数据
resolve(result)
})
.catch((res) => {
console.log(res)
})
}
},
}
}