[英]Not displayed correctly in elementUI Cascader
I use elementUI's cascading selector to display the data, I wrote this code according to the official documentation. 我使用elementUI的级联选择器显示数据,我根据官方文档编写了此代码。
<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;
}
}
It seems to be correct, but when I select the option, its first and second level data is unchanged. 看来是正确的,但是当我选择该选项时,其第一级和第二级数据不变。 As shown below.
如下所示。
I have been thinking for a long time and still can't find out why. 我已经思考了很长时间,但仍然找不到原因。 What surprised me even more is that if my third-level data is stitched with the previous parameters, the results will be displayed normally.
更令我惊讶的是,如果我的第三级数据与以前的参数结合在一起,结果将正常显示。
// 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}`;
Do you know the reason? 你知道原因吗? Please help me with your questions.
请帮我解决您的问题。 Thanks!
谢谢!
You can test here: https://jsfiddle.net/DangoSky/7osfp265/1/ 您可以在这里进行测试: https : //jsfiddle.net/DangoSky/7osfp265/1/
I think I know what the issue is, when you click on the option with the following hierarchy Shanghai > 3 > 03, the library searches top-down of where 03's value is be located. 我想我知道问题出在哪里,当您单击具有以下层次结构的选项>上海> 3> 03时,库将自上而下搜索03的值所在的位置。 The first hierarchy where 03 is located is Beijing > 1 > 03. Hence it shows the wrong label.
03所在的第一个层次结构是Beijing> 1>03。因此它显示了错误的标签。 This seems to be an issue with the library (or this is how they have designed) because when you use the handleChange method and do a console.log, it prints the value correctly.
这似乎是库的问题(或者这是它们的设计方式),因为当您使用handleChange方法并执行console.log时,它将正确打印该值。
To get around the issue, you can have the labels you want but the value needs to be unique to all the options. 要解决此问题,您可以拥有所需的标签,但该值对于所有选项而言都必须是唯一的。 Something like 'Shanghai+3+03' can be value so that you can split and recover the original values.
像“ Shanghai + 3 + 03”之类的东西可以作为值,以便您可以拆分和恢复原始值。
Check out the working fiddle https://jsfiddle.net/n365ecuk/ 查看工作提琴https://jsfiddle.net/n365ecuk/
getOptions(val) {
let res = [];
for(let i=1; i<=5; i++) {
let floor = Object.create(null);
floor.value = val + '+' + i;
floor.label = i;
floor.children = [];
for(let j=1; j<=5; j++) {
let obj = Object.create(null);
// 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 = val + '+' + i + '+' + j;
obj.label = j < 10 ? `0${j}` : `${j}`;
floor.children.push(obj);
}
res.push(floor);
}
return res;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.