This is the third day of my participation in the August More Text Challenge.Juejin. Cn/post / 698796…
Demand analysis:

Data at the lower level can be obtained only by the areaCode at the upper level

HTML:

<! --> <el-cascader class="cascader" :clearable="true" V-model ="value" placeholder=" placeholder" @change="areaHandleChange" filterable ></el-cascader>Copy the code

Got the data for downtown but there’s no echo on the page

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); }); }, // Address toggle 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); // Add the children attribute this.locationFinal[cityIndex]["children"] = []; res.forEach(item => { this.locationFinal[cityIndex].children.push({ value: item.areaCode, label: `${item.name}` }); }); // this.$nextTick(() => {this.options = this.locationFinal; / /}); console.log("options", this.options); // this.$set('userInfo',name,' red '); // this.$forceUpdate(); }); },Copy the code

Consider using dynamic loading to write:

html:

<el-cascader V-model ="position" placeholder=" props" @change="areaHandleChange" ></el-cascader>Copy the code

data:

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

Copy the code

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(" region: ", res); const nodes = res.map(item => ({ ... item, label: item.name, value: item.areaCode, leaf: level >= 2 })); resolve(nodes); }) .catch(err => {}); }},Copy the code

To get the value:

If (val) {console.log(val); // If (val) {console.log(val); / / / "110000", "110100", "110102"] the backend needs to last this. The position = val/val. The length - 1. This addressRuleForm. AreaCode = val/val. The length - 1. console.log("position", this.position); console.log( "this.addressRuleForm.areaCode", this.addressRuleForm.areaCode ); }},Copy the code

About why the article should… Item:

I can get the data in addition to the value and the lable and all I need here is the ID

The most critical step comes about clicking edit cascade selector to echo data:

<el-cascader show-all-levels :clearable="true" ref="cascaderAddr" class="cascader" v-model="position" Placeholder ="props" : @change=" props" ></el-cascader>Copy the code

Combined with ref = “cascaderAddr”

The watch listener hangs the initial value on the DOM when entering the component

 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
    }
  },
Copy the code