1、組件:
<a-cascader
:disabled="disabled"
:options="zhoptions"
:load-data="loadzhData"
placeholder="請(qǐng)選擇租戶"
:fieldNames="fieldzhNames"
@change="zhChange"
:change-on-select="true"
:auto-focus="true"
:value="defaultzhV"
v-if="!showzhInp"
/>
2掰茶、關(guān)鍵數(shù)據(jù)data:
zhoptions: [
{
id: '',
name: '租戶',
isLeaf: false,
},
],
fieldzhNames: {
value: 'id',
label: 'name',
children: 'children',
},
zhparentId: '', //租戶上級(jí)id
subZh: [], //下級(jí)租戶
3、change方法:
zhChange(value) {
this.zhparentId = value.length == 0 ? '' : value[value.length - 1]
this.defaultzhV = value
accountApi.getSubzh(this.zhparentId).then((res) => {
const resData = res.data
if (resData.success) {
this.subZh = resData.data
}
})
accountApi.getSubzh(this.zhparentId).then((res) => {
const resData = res.data
if (resData.success) {
let dataArr = resData.data
if (dataArr.length > 0) {
this.loadzhData(dataArr)
}
}
})
},
4蜜笤、異步加載方法loadData:
loadzhData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1]
targetOption.loading = true
targetOption.children = []
setTimeout(() => {
targetOption.loading = false
accountApi.getSubzh(this.zhparentId).then((res) => {
const resData = res.data
if (resData.success) {
let dataArr = resData.data
for (let j = 0; j < dataArr.length; j++) {
for (let i = 0; i < this.subZh.length; i++) {
if (dataArr[j].id === this.subZh[i].id) {
if (this.subZh[i].isHave == 'false') {
targetOption.children.push({
id: dataArr[j].id,
name: dataArr[j].name,
isLeaf: true,
})
} else if (this.subZh[i].isHave == 'true') {
targetOption.children.push({
id: dataArr[j].id,
name: dataArr[j].name,
isLeaf: false,
})
}
}
}
}
}
})
this.options = [...this.options]
}, 500)
},
5濒蒋、效果:
image.png
image.png
image.png
6、說明:
getSubzh是一個(gè)根據(jù)上級(jí)id查詢下級(jí)數(shù)據(jù)的接口把兔，參數(shù)是上級(jí)id沪伙，如果上級(jí)id不存在查詢的是第一級(jí)的數(shù)據(jù)瓮顽，
getSubzh在change方法中調(diào)用了兩次，否則會(huì)報(bào)錯(cuò)焰坪，
7趣倾、存在的問題:
無(wú)法對(duì)數(shù)據(jù)設(shè)置默認(rèn)值。
因?yàn)閿?shù)據(jù) zhoptions是異步動(dòng)態(tài)加載的某饰，如果不對(duì)級(jí)聯(lián)組件進(jìn)行操作儒恋，它的數(shù)據(jù)是不完整的。 如果你有解決的思路或方法黔漂，歡迎留言告知诫尽，在此謝過！＞媸亍（_）
補(bǔ)充：已更新牧嫉，存在的問題已解決
ant design vue 級(jí)連組件無(wú)限級(jí)加載
