懒加载级联选择级(多选)及其回显

  • Post author:
  • Post category:其他


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

具体的需求如下:

级联选择器在弹框中,用户在弹框中选择的结果放在页面组件中(选择的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;
           }
       },



版权声明:本文为organ_sweet原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。