最近项目中需要使用链接选择器将展开项的值作为参数调用接口，找了好多方法，然后使用了动态加载子节点，与 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>