element-ui中Cascader 级联选择器动态加载

需求:根据登录信息中的areaId来获取此地区下面各个区县村等,每次请求数据为选中地区的areaid

          
          

data中添加


      props: {
        expandTrigger: "hover",
        emitPath: false,
        lazy: true,
        lazyLoad: this.lazyLoad,
      },

方法 methods:{}

    lazyLoad(node, resolve) {
      this.getData(node, resolve);
    },
    getData(node, resolve) {
      let that = this;
      let level = node.level;

      const doit = function () {
        let areaLevel = that.info.areaLevel;
        // 4是因为所有地区层级一共只有4层,所以会动态显示下级层级数
        let j = 4 - areaLevel;
        var id;
        if (level == 0) {
          id = that.info.id;
        } else {
          id = node.value;
        }
        getChildDictAreaById(id).then((res) => {
          var result;
          if (level == 0) {
            result = res.data;
            result.forEach((item) => {
              item.value = item.id;
              item.label = item.areaName;
            });
          }
          if (0 < level < j) {
         // 这有问题 选择框内回显的数据只显示最后一个
            result = res.data;
            result.forEach((item) => {
              item.value = item.id;
              item.label = item.areaName;
              item.leaf = level > j - 2;
            });
          }
          resolve(result);
        });
      };

      if (!that.info) {
        that.getUserInfo(() => {
          doit();
        });
      } else {
        doit();
      }
    },
    getUserInfo(callback) {
      getInfo({}).then((res) => {
        this.info = res.data.dictArea;
      });
    },

  mounted() {
    this.getUserInfo();
  },

这就是我再网上找方法后加上自己的项目要求改动的代码,可是有个问题就是选择地区之后显示的只有最后一个数据,但项目也没有过多的要求。有知道怎么改的欢迎积极留言 —_—

你可能感兴趣的:(element,javascript,vue.js)