- 首页 > it技术 > >
Element-UI级联选择器(Cascader)获取全路径Label
首先要说明的是,elemnt-ui上关于级联选择器提供了方法,获取节点 getCheckedNodes
此方法能够获取节点信息,但是在复杂的场景下,比如级联选择器是循环创建的. 而且吧,搞不懂element-ui为啥要在2.7移除这个方法,所以不指望别人了,自己动手一劳永逸,所以.....废话不多说先上效果
json = [
{
value: "animal",
label: "动物",
children: [
{
value: "cat",
label: "猫"
},
{
value: "dog",
label: "狗"
}
]
},
{
value: "world",
label: "世界",
children: [
{
value: "china",
label: "中国",
children: [
{
value: "henan",
label: "河南"
children: [
value: "kaifeng",
label: "开封"
]
}
]
}
]
}
]
- 级联选择器用这组数组做数据源选择其中某项的最后一级时得到的是个数组,无论单选还是多选,假设获取的值为 [“world”,“china”,“henan”,“kaifeng”]
- 那么我们想要得到的结果应该是 : “世界/中国/河南/开封”,明确需求,开始干!直接上代码
const treeToLabel = (data, arr) => {
let result =[]
const childrenTreeToLabel = (data, arr, result) => {
for(let j = 0;
j < data.length;
j++) {
if (arr[0] == data[j].value) {
result.push(data[j].value)
if (data[j].children && arr.length > 1) {
childrenTreeToLabel(data[j].children, arr.slice(1), result)
}
break;
}
}
}
childrenTreeToLabel(data,arr,result)
return result.join("/")
}
- 到此就完成了 此时调用该函数就可以得到想要的结果了,arr为选中结果数组,也就是v-model绑定的级联选择器的数据
console.log(json,["world","china","henan","kaifeng"])
"世界/中国/河南/开封"
推荐阅读
