需求一:
我需要在cascader级联选择后,拿到当前选择对象的其他参数信息,而不单单只获取到选择的value值
如上图,ElementUI 提供了这个获取所选节点的信息函数 getCheckedNodes
,正好解决了我需要当前节点的其他信息,不单单只是选择时返回的 value
值
需求二:
后端返回的数组,并不是cascader级联选择器默认的value,label,children怎么修改成当前的键值来循环呢?
但至于怎么用,文档都没有给出例子,所以这里补充一下用法,直接上代码:
<template>
<el-cascader
ref="cascader"
:props="customProps"
:options="optionsList"
filterable
clearable
@change="handleChange"
/>
</template>
<script>
export default {
data() {
return {
optionsList: [
{
child: [{
key: "/collect-article/article-list",
name: "文章采集列表",
path: "/collect-article.html#/article-list"
}],
icon: "",
key: "/collect-article/*",
name: "官网文章采集",
show: true,
},{
child: [{
key: "/user-manange/user-list",
name: "人员列表",
path: "/user-manange.html#/user-list"
},
{
key: "/user-manange/user-rbac",
name: "人员权限",
path: "/user-manange.html#/user-rbac"
}],
icon: "",
key: "/user-manange/*",
name: "人员管理",
show: true
}
],
customProps: {
multiple: true, // 启用多选
emitPath: false, // 只返回该节点的值
value: 'path', // 自定义当前数组的键名
label: 'name',
children: 'child'
}
}
},
},
methods:{
handleChange(val){
let nodesInfo = this.$refs['cascader'].getCheckedNodes()
console.log('nodesInfo>>>>>',nodesInfo)
}
}
</script>
自定义键名后的级联选择器:
选择后输出的nodes节点信息:
完美解决了上面两个问题,收场 ~