最近項目中需要使用鏈接選擇器將展開項的值作為參數調用接口，找了好多方法，然后使用了動態加載子節點，與 lazyLoad 方法結合使用，實現了
代碼：
<el-form-item label="地點:" prop="locale">
<el-cascader
:props="props"
v-model="SLA.locale"
:options="rule.building"
collapse-tags
/>
</el-form-item>
<script>
export default{
data(){
return{
props: {
multiple: true, //是否多選
checkStrictly: true, //是否嚴格的遵守父子節點不互相關聯 我這里是要多選，要是單選的這個兩個屬性可以不用加
label: 'name',//注意，這個label值顯示的需要每次調接口時返回的數據中字段都要為'name',不然會出現每層的label數據都是一樣的
lazy: true, //是否動態加載子節點
async lazyLoad(node, resolve) { //function(node, resolve)，
node為當前點擊的節點，
resolve為數據加載完成的回調(必須調用)
const { data } = node
if (data && data.children && data.children.length !== 0) {
return resolve([])
}
const params = {
}
if (data) { //判斷data是不是空，如果不是，將data中的某個數據拿出來作為參數傳遞
params['block'] = data['siteId'] || ''
params['blId'] = data['blId'] || ''
params['flId'] = data['flId'] || ''
}
// console.log(data)
// console.log(params)
try {
// const r = await getLocation(params) 調用接口
const targetData = []
for (const item of r.data) {
//將拿到的數據一層一層拿出來處理
const temp = {
siteId: item['siteId'] || '',
blId: item['blId'] || '',
flId: item['flId'] || '',
rmId: item['rmId'] || '',
name: item['name'] || '未命名',
leaf: item['leaf'], //后端數據中leaf一開始要為false,最后一次的時候才為true
children: item['children'] || []
}
temp['value'] = temp['rmId'] || temp['flId'] || temp['blId'] || temp['siteId'] //將拿出來的值從小到大賦值
targetData.push(temp)//然后push到節點中
}
resolve(targetData)
} catch (e) {
console.log(e)
resolve([])
}
}
},
SLA:{
locale: [],
},
rule:{
building: []
}
},
methods:{
}
}
}
</script>