关于 vue+elementUI 的联级选择器 cascader

本案例为四级联查：  前端（vue+elementUI）     后端：（springboot+mybatis+mysql）

1，前端：

<el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
    <el-form-item label="服务器ip/类型/版本/接口名称" prop="conditions">
      <el-cascader
         v-model="componentConditionOptions.componentConditions"
                 :options="conditionOptions"
                 style="width: 100%"
                 clearable></el-cascader>
        </el-form-item>
</el-dialog>


<script>
import {getCascader} from "@/views/demo/js/paramter";

export default {
  name: "Paramter",
  data() {
    return {      //只显示了与联查相关的代码了
      //服务器IP、组件类型、组件版本、接口名称查询条件
       conditionOptions:[],
          };
  },

  created() {     //页面加载时 加载的初始数据
        //联查
        this.getCascaderConditions();
     },

 methods: {

  getCascaderConditions(){
     getCascader().then(response => {
                   this.conditionOptions = response.data.icondition;
       });
  },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
           var conditionStr = this.componentConditionOptions.componentConditions;
            //由于后端接受的数据为String  必须将json转为String   （ 同样在修改回显数据时，通过后台将字段拼接好json型字符串，前台接受字符转再将字符串转为Json格式）
           this.form.conditions= JSON.stringify(conditionStr);
            updateParamter(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
           var conditionStr = this.componentConditionOptions.componentConditions;
           //这里也是将Json转为字符串传到后端
           this.form.conditions= JSON.stringify(conditionStr);
            addParamter(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
               //多级联查下拉框数据清空（注意：由于vue对象不清空数据会导致 下次点开编辑页面 数据自动填充）
              this.componentConditionOptions.componentConditions = null;
              
              this.getList();
            });
          }
        }
      });
    },

  }
}
       

</script>

后端：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252

//在VO目录下里创建封装类 //创建IConditionVO 类             import lombok.Data;         import java.util.List;       @Data       public class IConditionVO {          private  List<IServerIpVO> icondition;       }   //创建IServerIpVO 类        import lombok.Data;      import java.util.List;     @Data      public class IServerIpVO {         private String label;        private String value;        private List<ITypeVO> children;      }   //创建ITypeVO 类   import lombok.Data; import java.util.List;   @Data public class ITypeVO {     private String label;     private String value;     private List<IRevisionVO> children; }   //创建IRevisionVO 类   import lombok.Data; import java.util.List; @Data public class IRevisionVO {     private String label;     private String value;     private List<IInterfacesVO> children; }   //创建IInterfacesVO 类 import lombok.Data; @Data public class IInterfacesVO {     private String label;     private String value; }     //获取的主表（关联查出的）   import com.baomidou.mybatisplus.annotation.TableField; import lombok.*; import com.xxx.BaseEntity; import springfox.documentation.spring.web.json.Json;     /**  * 组件接口信息对象  *  * @author david  * @date 2021-08-20  */ @Builder @Data @NoArgsConstructor @AllArgsConstructor @ToString public class ComponentInterfaceInfo extends BaseEntity {     private static final long serialVersionUID = 1L;       /** 组件接口主键 */     private String id;       /** 组件类型编号 */     private String componentInterfaceTypeId;       /** 服务器IP */     private String serverIp;       /** 组件接口编号 */     private String componentInterfaceId;       /** 组件类型名称 */     @TableField(exist = false)     private String componentInterfaceTypeName;       /** 组件接口版本号 */     private String componentRevisionNo;       /** 组件接口名 */     private String componentInterfaceName;       /** 接口组件说明 */     private String componentInterfaceIntruduce;       /** 组件接口地址 */     private String componentInterfaceAddress;       /** 组件接口返回格式 */     private String componentInterfaceReturnFormat;       /** 组件接口请求方式 */     private String componentInterfaceRequestMethod;       /** 组件接口请求方式 */     @TableField(exist = false)     private String componentInterfaceRequestMethodName;       /** 组件版本上架状态 */     private String componentRevisionStatus;       @TableField(exist = false)     private String conditions; }     //控制层     @RequestMapping("/cascaderData")     public R cascaderData()     {         return R.success(paramterService.getCascader());     }     //接口实现类（跳过业务接口）  @Override     public IConditionVO cascader() {           /**          * 注意：1、每一步的List遍历都是将List转为map   先实例map对象再 进行List集合遍历          *      2、每一步的map集合遍历都是对VO进行封装   封装完以后 还要获取下一层数据的list集合          */           //封装serverIp         List<IServerIpVO> iServerIpVOList  = null;         //封装type         List<ITypeVO> typeVOList = null;         //封装revision         List<IRevisionVO> revisionVOList = null;         //封装接口         List<IInterfacesVO> interfaceVOList = null;           IConditionVO icVO = new IConditionVO();         IServerIpVO iServerIpVO = null;         ITypeVO iTypeVO = null;         IRevisionVO iRevisionVO = null;         IInterfacesVO iInterfacesVO = null;   //获取所有数据，包括关联查询出来的各字段名称--作label显示 List<ComponentInterfaceInfo> componentInterfaceInfoList =  xxxMapper.getAllList();           Map<String,List<ComponentInterfaceInfo>> ipMap = new HashMap<>();         for(ComponentInterfaceInfo componentInterfaceInfo:componentInterfaceInfoList){             if(!ipMap.containsKey(componentInterfaceInfo.getServerIp())){                 List<ComponentInterfaceInfo> interfaceList = new ArrayList<>();                 interfaceList.add(componentInterfaceInfo);                 ipMap.put(componentInterfaceInfo.getServerIp(),interfaceList);             }else{                 ipMap.get(componentInterfaceInfo.getServerIp()).add(componentInterfaceInfo);             }         }           iServerIpVOList = new ArrayList<>();         for(Map.Entry<String,List<ComponentInterfaceInfo>> entry:ipMap.entrySet()){               iServerIpVO = new IServerIpVO();             iServerIpVO.setLabel(entry.getKey());             iServerIpVO.setValue(entry.getKey());             iServerIpVOList.add(iServerIpVO);             List<ComponentInterfaceInfo> componentTypeList = entry.getValue();             Map<String,List<ComponentInterfaceInfo>> typeMap = new HashMap<>();               for(ComponentInterfaceInfo componentTypeInfo:componentTypeList){                 if(!typeMap.containsKey(componentTypeInfo.getComponentInterfaceTypeId())){                     List<ComponentInterfaceInfo> typeList = new ArrayList<>();                     typeList.add(componentTypeInfo);                     typeMap.put(componentTypeInfo.getComponentInterfaceTypeId(),typeList);                 }else{                     typeMap.get(componentTypeInfo.getComponentInterfaceTypeId()).add(componentTypeInfo);                 }             }               typeVOList = new ArrayList<>();             for(Map.Entry<String,List<ComponentInterfaceInfo>> typeEntry:typeMap.entrySet()){                   iTypeVO = new ITypeVO();                 iTypeVO.setValue(typeEntry.getKey());                 iTypeVO.setLabel(typeEntry.getValue().get(0).getComponentInterfaceTypeName());                 typeVOList.add(iTypeVO);                   List<ComponentInterfaceInfo> componentRevisionList = typeEntry.getValue();                   Map<String,List<ComponentInterfaceInfo>> revisionMap = new HashMap<>();                 for(ComponentInterfaceInfo revisionInfo:componentRevisionList) {                     if (!revisionMap.containsKey(revisionInfo.getComponentRevisionNo())) {                         List<ComponentInterfaceInfo> revisionList = new ArrayList<>();                         revisionList.add(revisionInfo);                         revisionMap.put(revisionInfo.getComponentRevisionNo(), revisionList);                     } else {                         revisionMap.get(revisionInfo.getComponentRevisionNo()).add(revisionInfo);                     }                 }                   revisionVOList = new ArrayList<>();                 for(Map.Entry<String,List<ComponentInterfaceInfo>> revision:revisionMap.entrySet()){                       iRevisionVO =new IRevisionVO();                     iRevisionVO.setValue(revision.getKey());                     iRevisionVO.setLabel(revision.getValue().get(0).getComponentRevisionNo());                     revisionVOList.add(iRevisionVO);                       List<ComponentInterfaceInfo> interfaceList =  revision.getValue();                       Map<String,List<ComponentInterfaceInfo>> interfaceMap = new HashMap<>();                     for(ComponentInterfaceInfo componentInterfaceInfo:interfaceList){                         if(!interfaceMap.containsKey(componentInterfaceInfo.getId())){                             List<ComponentInterfaceInfo> interfaceOneList = new ArrayList<>();                             interfaceOneList.add(componentInterfaceInfo);                             interfaceMap.put(componentInterfaceInfo.getId(),interfaceOneList);                         }else{                             interfaceMap.get(componentInterfaceInfo.getId()).add(componentInterfaceInfo);                         }                     }                       interfaceVOList = new ArrayList<>();                     for(Map.Entry<String,List<ComponentInterfaceInfo>> componentEntry:interfaceMap.entrySet()){                           iInterfacesVO = new IInterfacesVO();                         iInterfacesVO.setLabel(componentEntry.getValue().get(0).getComponentInterfaceName());                         iInterfacesVO.setValue(componentEntry.getKey());                         interfaceVOList.add(iInterfacesVO);                       }                     iRevisionVO.setChildren(interfaceVOList);                   }                 iTypeVO.setChildren(revisionVOList);               }             iServerIpVO.setChildren(typeVOList);           }         icVO.setIcondition(iServerIpVOList);           return icVO;     }