博客

最近有个需求：懒加载三级行政区域，而且可以进行多选，其中涉及它的回显比较麻烦，级联选择器多选出来的结果是一个二维数组，要对这个二维数组回显，而拿到回显的数据是最后一级数据组成的数组。

具体的需求如下：

级联选择器在弹框中，用户在弹框中选择的结果放在页面组件中（选择的label和value）显示
label，将value传给后台。再次点击弹框时，需要回显用户的选择，同时在页面组件中用户是可以
删除某个选中的行 政区域的。

• 1、懒加载三级行政区域级联选择器，先默认请求第一级（省级行政区域），然后懒加载二三级。

//html代码
 <el-cascader
                        ref="goverCascader"
                        v-model="zoneIds"
                        :props="cascaderProps"
                        :options="legalAreaOptions"
                        collapse-tags
                        clearable
                        :show-all-levels="false"
 ></el-cascader>

 //参数配置
  cascaderProps: {
                label: "zoneName",
                value: "zoneId",
                multiple: true,
                expandTrigger: "click",
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.lazyLoad
            },
  legalAreaOptions: [],
  goverTags:[],//行政区域   
  zoneIds: [],//行政区域id
  goverAreaDialog: false,//行政区域弹框
  
 //js代码 
  // 获取省级行政区域
        getProvinces(){
            getProvincesApi({}).then(res=>{
                this.legalAreaOptions = res.data;
            })
        },
 // 懒加载行政区域
        lazyLoad(node, resolve) {
          if (node.level == 1) {
                getLowerLevelsByZoneIdApi({ zoneId: node.value }).then(res => {
                    resolve(res.data);
                });
            }else if(node.level == 2){
                getLowerLevelsByZoneIdApi({zoneId:node.value}).then(res=>{
                    resolve(res.data)
                })
            }else{
                resolve([])
            }
        },

• 2、在点击弹框“确认”按钮时获取用户选中的节点label和value，将其显示在页面上。

 // 弹框--“确定”
        okDialog(){
                this.goverTags = [];
                let arr = this.$refs.goverCascader.getCheckedNodes();//获取选中的节点
                arr.forEach(ele => {
                    this.goverTags.push({zoneName:ele.label,zoneId:ele.value})
                });                
                this.goverAreaDialog = false;
        },
  
  //html代码，将选择结果展示的页面
  <el-tag 
	    v-for="(item,index) in goverTags" 
	       :key="index"
	       closable
	       @close="handleTagClose(item,'gover')"
  >{{item.zoneName}}</el-tag>

• 3、再次点击弹框时，对页面选中结果回显。在这里关闭弹框时并没有销毁弹框组件，主要是用户可以在页面上直接删除选中结果，所以再次点击时需要回显到级联选择器中去。

   // open--行政区域弹框(回显级联选择器)
       gotoGoverDialog(){
           this.goverAreaDialog = true;
           if(this.goverTags.length == 0){
               this.zoneIds = [];
           }else{
               let zoneArr = [];
               this.zoneIds.forEach(item=>{   
                   this.goverTags.forEach((tag)=>{
                       if(item[item.length-1] == tag.zoneId){
                           zoneArr.push(item);
                       }
                   })
               });
               this.zoneIds = zoneArr;
           }
       },