关于 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>

后端：

//在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;
    }