element-ui中级联选择器Cascader使用中遇到的意想不到的空白
事故现场
如题，笔者在使用级联选择器的时候，明明选中了选项，但是页面并没有展示，而是展示为空，如下图所示
寻找原因
控制台打印出来的所有数据都是没有问题的，绑定的model也显示正常，折让我百思不得其解，最后只能请教我们公司的前端大神，大神帮我看后，看到控制台打印的信息，直接说绑定的value值重复了，系统渲染不明白了。
比如，我处理后的data如下图所示
[
{
"value": 1,
"label": "仓库#1",
"children": [
{
"value": 1,
"label": "物料1"
},
{
"value": 2,
"label": "物料2"
},
{
"value": 4,
"label": "物料3"
},
{
"value": 19,
"label": "物料8"
},
{
"value": 21,
"label": "物料10"
},
{
"value": 24,
"label": "物料14"
},
{
"value": 25,
"label": "物料15"
}
]
},
{
"value": 2,
"label": "仓库#2",
"children": [
{
"value": 1,
"label": "物料1"
},
{
"value": 2,
"label": "物料2"
},
{
"value": 4,
"label": "物料3"
},
{
"value": 19,
"label": "物料8"
},
{
"value": 24,
"label": "物料14"
},
{
"value": 25,
"label": "物料15"
}
]
},
{
"value": 3,
"label": "仓库#3",
"children": [
{
"value": 1,
"label": "物料1"
}
]
},
{
"value": 4,
"label": "仓库#4",
"children": [
{
"value": 1,
"label": "物料1"
},
{
"value": 5,
"label": "物料4"
}
]
},
{
"value": 5,
"label": "仓库#5",
"children": [
{
"value": 2,
"label": "物料2"
},
{
"value": 18,
"label": "物料7"
}
]
},
{
"value": 6,
"label": "仓库#6",
"children": [
{
"value": 19,
"label": "物料8"
}
]
},
{
"value": 7,
"label": "测试盘点",
"children": [
{
"value": 1,
"label": "物料1"
},
{
"value": 19,
"label": "物料8"
}
]
}
]
乍一看，这些数据没什么问题，各自对应的下级也都正常，
大神的意思是这样不行，value不能重复，即如果选择后有[1,2]这样的数据后，就不能出现[2,1]这样的格式，要不然组件渲染不明白，修改后给第一级value加了个字母P前缀，给子级加了个字母C前缀，依然不行，因为此时虽然不会出现上吗的情况了，但是不同的children中还是会有相同的value，好家伙，这是要所有的value都唯一啊，这样才能识别。
于是就改成了下面这样的
[
{
"value": "P1",
"label": "仓库#1",
"children": [
{
"value": "C0_1",
"label": "物料1"
},
{
"value": "C0_2",
"label": "物料2"
},
{
"value": "C0_4",
"label": "物料3"
},
{
"value": "C0_19",
"label": "物料8"
},
{
"value": "C0_21",
"label": "物料10"
},
{
"value": "C0_24",
"label": "物料14"
},
{
"value": "C0_25",
"label": "物料15"
}
]
},
{
"value": "P2",
"label": "仓库#2",
"children": [
{
"value": "C1_1",
"label": "物料1"
},
{
"value": "C1_2",
"label": "物料2"
},
{
"value": "C1_4",
"label": "物料3"
},
{
"value": "C1_19",
"label": "物料8"
},
{
"value": "C1_24",
"label": "物料14"
},
{
"value": "C1_25",
"label": "物料15"
}
]
},
{
"value": "P3",
"label": "仓库#3",
"children": [
{
"value": "C2_1",
"label": "物料1"
}
]
},
{
"value": "P4",
"label": "仓库#4",
"children": [
{
"value": "C3_1",
"label": "物料1"
},
{
"value": "C3_5",
"label": "物料4"
}
]
},
{
"value": "P5",
"label": "仓库#5",
"children": [
{
"value": "C4_2",
"label": "物料2"
},
{
"value": "C4_18",
"label": "物料7"
}
]
},
{
"value": "P6",
"label": "仓库#6",
"children": [
{
"value": "C5_19",
"label": "物料8"
}
]
},
{
"value": "P7",
"label": "测试盘点",
"children": [
{
"value": "C6_1",
"label": "物料1"
},
{
"value": "C6_19",
"label": "物料8"
}
]
}
]
这样就好了，没有问了
结论
element-ui中的级联选择器,data值在设定的时候，不管是那一层的value都要是唯一的，即全局唯一，要不然组件在渲染的时候就会出现问题。