省市区三级联动 以及cascader回显

这是我参与8月更文挑战的第3天，活动详情查看： 8月更文挑战” juejin.cn/post/698796…

需求分析：

省数据不用传 市区和区 都要根据上一层的areaCode 才能获取到下级的数据

html：

<!-- 省市区 -->
                  <el-cascader
                    class="cascader"
                    :clearable="true"
                    v-model="value"
                    placeholder="请选择省/市/区,试试搜索：北京,"
                    :options="options"
                    @change="areaHandleChange"
                    filterable
                  ></el-cascader>

拿到了市区的数据 但是页面上没有回显

  //省份数据
    getProvince() {
      getArea().then(res => {
        console.log(res);

        res.forEach(item => {
          this.locationFinal.push({
            value: item.areaCode,
            label: `${item.name}`,
            // children: []
            // childrens:undefined
          });
        });

        this.options = this.locationFinal;
        console.log("options", this.options);
      });
    },
    //地址切换
    areaHandleChange(val) {
      console.log(val);

      getArea(Number(val[0])).then(res => {
        console.log("市区：", res);

        let cityIndex = "";

        for (var i = 0; i < this.locationFinal.length; i++) {
          if (this.locationFinal[i].value === val[0]) {
            cityIndex = i;
          }
        }

        console.log("cityIndex", cityIndex);

        //添加children属性
        this.locationFinal[cityIndex]["children"] = [];

        res.forEach(item => {
          this.locationFinal[cityIndex].children.push({
            value: item.areaCode,
            label: `${item.name}`
          });
        });

        // this.$nextTick(() => {
          // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
          this.options = this.locationFinal;
        // });

        console.log("options", this.options);
        // this.$set('userInfo',name,'小红'); 
      // this.$forceUpdate();
      });
    },

考虑用动态加载的方法写：

html:

       <el-cascader
                    v-model="position"
                    placeholder="请选择省/市/区,试试搜索：北京"
                    :props="props"
                    @change="areaHandleChange"
                  ></el-cascader>

data:

  props: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },

mothods:

 //方法里面写
    lazyLoad(node, resolve) {
      // console.log('node',node);
      const { level } = node;

      console.log("leval", level); //0

      if (node.level == 0) {
        var params = "";
      } else {
        var params = node.value;
      }
      if (node.level <= 3) {
        getArea(params)
          .then(res => {
            console.log("地区：", res);
            const nodes = res.map(item => ({
              ...item,
              label: item.name,
              value: item.areaCode,
              leaf: level >= 2
            }));
            resolve(nodes);
          })
          .catch(err => {});
      }
    },

拿到值：

  //地址切换
    areaHandleChange(val) {
    //点击x号清空
      if (val) {
      console.log(val); //["110000", "110100", "110102",] 后端需要最后一个
      this.position = val[val.length-1]
      this.addressRuleForm.areaCode =val[val.length-1];
      console.log("position", this.position);
      console.log(
        "this.addressRuleForm.areaCode",
        this.addressRuleForm.areaCode
      );
      }
    },

关于文章为什么要...item 展开：

可以拿到 除了value和lable之外的数据 我这里只需要id

最关键的一步来了 关于点击编辑 级联选择器回显数据：

 <el-cascader
                    show-all-levels
                    :clearable="true"
                    ref="cascaderAddr"
                    class="cascader"
                    v-model="position"
                    placeholder="请选择省/市/区"
                    :props="props"
                    @change="areaHandleChange"
                  ></el-cascader>

加上 ref="cascaderAddr"

在进入组件watch监听 把初始值挂在dom上

 watch: {
    addressRuleForm: {
      handler: function(val, oldVal) {
        console.log("watch", val);
        if (val.province) {
          let { province, region, city } = this.addressRuleForm;
          this.$refs["cascaderAddr"].inputValue =
            province + " / " + region + " / " + city;
          // this.addressRuleForm.areaCode =
        }
      },
      deep: true
    }
  },