element ui cascader级联选择器需要点击两下才回显 级联选择器使用lazyLoad动态渲染数据

级联选择器使用lazyLoad动态渲染数据

以下为效果图:

写这个的时候 遇到了两个坑 1是最后一级显示暂无数据 2 是最后一级需要点击两下才会回显

以下是element官网给出的解释

显而易见 这个leaf是控制是否有子节点的关键因素,我刚开始试图通过更改>=xx来控制下一级是否显示，但是这样代码就十分繁琐，而我试着不带着这个属性，就会出现最后一级需要点击两次的效果，很不美观，看网上很多说回滚后数据给undefined，还有去掉v-model,这些方法尝试无果都想放弃的时候,我开始注意到还是得通过leaf这个属性来改变我的代码
下面展示一些 内联代码片。

      <el-cascader
        clearable
        placeholder="请选择"
        :options="allSubCatList"
        :props="cascaderProps"
        @change="OptionChange"
      ></el-cascader>

  data() {
    return {
      allSubCatList: [],
      cascaderProps: {
        lazy: true, //开启动态加载
        lazyLoad: this.getData,
      },
    };
  },

 methods: {
    async getData(node, resolve) {
      let level = node.level;
      let nodes = [];
      let params = { cid: 0 }; //要传递给后端的参数,根据实际情况而定
      if (level !== 0) {
        params.cid = node.data.value;
      }
      //请求后端接口并回显
      await ShopCategory(params).then((res) => {
        nodes = Array.from(res.data.data).map((item) => ({
          value: item.id,
          label: `${item.name}`,
          level: item.level,
          leaf: item.is_leaf === true, //根据接口返回是否有子数据
        }));
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        resolve(nodes);
      });
    },
  },

以上,在接口请求结束后,这边通过leaf是否显示来控制子节点,就完美避开上面所述得两个bug,不过需要后端接口提供布尔值，也就是是否有子节点的字段,现在的效果就是正常的选择和回显的啦

为了更方便参考,这里附带部分后端接口返回数据

[
    {
        "id": 36497,
        "name": "大码衬衫",
        "level": 3,
        "parent_id": 20245,
        "is_leaf": true,
        "enable": true
    },
    {
        "id": 36496,
        "name": "大码连衣裙",
        "level": 3,
        "parent_id": 20245,
        "is_leaf": true,
        "enable": true
    },
    {
        "id": 36498,
        "name": "大码牛仔裤",
        "level": 3,
        "parent_id": 20245,
        "is_leaf": true,
        "enable": true
    }
]