<ElCascader
ref="cascader"
:key="key"
v-model="code"
clearable
filterable
:props="props"
/>
重點(diǎn)在于props,在js文件中進(jìn)行定義
data(){
return {
props: {
//設(shè)置為懶加載的模式
lazy: true,
value: 'value',
expandTrigger: 'click',
lazyLoad(node, resolve) {
const { level, root, data } = node
//判斷為根節(jié)點(diǎn)時(shí)入?yún)ueryType的值為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標(biāo)明節(jié)點(diǎn)是不是葉子節(jié)點(diǎn)鸠儿,在這里表示當(dāng)為第三級(jí)(即level為2時(shí)就是葉子節(jié)點(diǎn),不會(huì)再調(diào)接口加載選項(xiàng))
leaf: level >= 2,
}))
// 將結(jié)果resolve出去厕氨,result就是我們想要的數(shù)據(jù)
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)
})
}
},
},
}
}
如果業(yè)務(wù)邏輯沒那么復(fù)雜进每,只是點(diǎn)擊選項(xiàng)就會(huì)調(diào)接口請(qǐng)求數(shù)據(jù)的話,
data(){
return {
props: {
//設(shè)置為懶加載的模式
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,
}))
// 將結(jié)果resolve出去命斧,result就是我們想要的數(shù)據(jù)
resolve(result)
})
.catch((res) => {
console.log(res)
})
}
},
}
}