在 elementUI Cascader 中显示不正确

Question

我用的是elementUI的层叠selector显示数据，我按照官方文档写了这段代码

  <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;
    }
  }

好像是对的，但是我select选项的时候，它的第一级和第二级数据没有变化。如下图

我想了很久，还是想不通。更让我惊讶的是，如果我的三级数据用之前的参数拼接，结果会正常显示

  // 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://jsfiddle.net/DangoSky/7osfp265/1/

Answer 1

我想我知道问题出在哪里，当您单击具有以下层次结构 Shanghai > 3 > 03 的选项时，库会搜索 top-down 03 的值所在的位置。 03所在的第一个层级是北京>1>03。因此它显示了错误的标签。这似乎是库的问题（或者这就是他们的设计方式），因为当您使用 handleChange 方法并执行 console.log 时，它会正确打印值。

要解决此问题，您可以使用所需的标签，但所有选项的值都必须是唯一的。 'Shanghai+3+03' 之类的东西可以是值，以便您可以拆分和恢复原始值。

检查工作 fiddle 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;
}

在 elementUI Cascader 中显示不正确

Not displayed correctly in elementUI Cascader

javascript

vue.js

element-ui