Utilizing elementUI's cascading selector to present data, I have crafted this code in accordance with the official documentation.
<el-cascader
v-model="address"
:options="addressOptions"
:props="{expandTrigger: 'hover'}"
></el-cascader>
data() {
return {
address: '',
addressOptions: [
{
value: 'Beijing',
label: 'Beijing',
children: this.getOptions("Beijing")
},
{
value: 'Shanghai',
label: 'Shanghai',
children: this.getOptions("Shanghai")
}
]
}
}，
methods: {
getOptions(val) {
let res = [];
for(let i=1; i<=5; i++) {
let floor = Object.create(null);
floor.value = i;
floor.label = i;
floor.children = [];
for(let j=1; j<=5; j++) {
let obj = Object.create(null);
obj.value = j < 10 ? `0${j}` : `${j}`;
obj.label = j < 10 ? `0${j}` : `${j}`;
floor.children.push(obj);
}
res.push(floor);
}
return res;
}
}
Although it appears to be correct, when selecting an option, the first and second level data remain unchanged. See below for illustration.
https://i.sstatic.net/XrtAo.gif
After prolonged contemplation, I am still unable to discern the reason behind this peculiar behavior. What baffles me further is that combining third-level data with prior parameters yields normal results.
// Can be displayed normally
// obj.value = j < 10 ? `0${j}${val}` : `${j}${val}`;
// obj.label = j < 10 ? `0${j}${val}` : `${j}${val}`;
// This cannot be displayed normally.
obj.value = j < 10 ? `0${j}` : `${j}`;
obj.label = j < 10 ? `0${j}` : `${j}`;
https://i.sstatic.net/vhHdR.gif
If you have insights or solutions, kindly share them. Much appreciated!
You may test it out here: https://jsfiddle.net/DangoSky/7osfp265/1/