本项目开源地址:开源地址
如图,选中之后,cascader选中之后,选中的数据未显示出来。
既然数据能渲染出来,就证明绑定的labe、value都是正确的。
那么,我们可以检查下后端返的数据。
可以看出,数组中有空的子集集合,我们只需要把空的子集去除掉,就可以选中并展示数据了。
代码如下:
<el-cascader
ref="cascader"
style="width: 95%"
:options="cityList"
:props="props"
clearable
/>
data() {
return {
props: {
children: 'child',
label: 'regionName',
value: 'regionId',
multiple: true
}
},
mounted() {
let cityList = JSON.parse(localStorage.getItem('cityList'));
this.cityList = this.changeNodes(cityList);
},
methods: {
changeNodes (data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (!data[i].child || data[i].child.length < 1) {
data[i].child = undefined;
} else {
this.changeNodes(data[i].child);
}
}
}
return data;
}
}
本项目开源地址:开源地址
有问题可留言。