在 elementUI Cascader 中未正确显示

Question

我使用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;

    }

  }

看起来是正确的，但是当我选择该选项时，它的一级和二级数据没有变化。如下所示。

想了很久，还是没找到原因。更让我惊讶的是，如果我的三级数据与前面的参数拼接，结果会正常显示。

  // 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/