【Vue】Cascader 级联选择器选项数据源children存在同名项(label相同,value不同)时显示异常

Z时代
2024-01-10
分类：技术分享

问题描述

在Cascader组件中，数据源是省市县数据，每个省市县地区都有对应的code码(唯一不重复)，我想要拿到选中的省市县数组如[ "四川省", "成都市", "新都区" ]，拿是拿到了，但是Cascader的现实框有问题，怎么办?

相关代码

{{ form.regions }}<el-cascader v-model="form.regions" placeholder="试试搜索：地址" :options="regions" filterable :props="{value:'label',expandTrigger: 'hover'}"></el-cascader>

regions为省市县数组，部分数据如下

[
{
"label": "山东省",
"value": "370000",
"children": [{
"label": "济南市",
"value": "370100",
"children": [
{"label": "市辖区","value": "370101"},
{"label": "历下区","value": "370102"},
{"label": "市中区","value": "370103"}
]
},
{
"label": "青岛市",
"value": "370200",
"children": [
{"label": "市辖区","value": "370201"},
{"label": "市南区","value": "370202"},
{"label": "市北区","value": "370203"}
]
}]
},
{
"label": "四川省",
"value": "510000",
"children": [{
"label": "成都市",
"value": "510100",
"children": [
{"label": "市辖区","value": "510101"},
{"label": "新都区","value": "510114"}
]
},
{
"label": "乐山市",
"value": "511100",
"children": [
{"label": "市辖区","value": "511101"},
{"label": "市中区","value": "511102"},
{"label": "沙湾区","value": "511111"},
]
}]
},]