关于前端vue el-cascader级联选择器

最简单的方法，往往才是最有效的方法：前端代码：

<template>
    <el-container>
          <el-form-item label="选择老婆们和孩子们：" >
                                       <el-cascader
                                       style=" 200px"
                                       @change="handleChange"
                                       :options="defaultOptions"
                                       v-model="wifesAndBabes"
                                       clearable>
                                       </el-cascader>
                                 </el-form-item>
    </el-container>
</template>



 export default {

          //封装数据
    data() {
      return {

             defaultOptions: [],

                 }；
               },

  //页面加载前执行方法
     created(){
        this.showOptions();     //默认获取后端传至前端的下拉框联查数据
    },

        //方法封装区
        methods: {
       
showOptions(){
       //执行调用后端接口方法selectNextWifesAndBabes
         selectNextWifesAndBabes().then(response => {
       //将获取的后端数据封装在defaultOptions 里
         this.defaultOptions = response.data.options;
      //工作台打印
         console.log("获取的封装值为："+this.defaultOptions);
        });
     },

      },
  }


注意：此方法默认在 import{调后端接口方法} from "指定文件位置"
  //获取多级联查条件数据
  export function selectNextWifesAndBabes() {
    return request({
      url: '/a/B/C',           //后端接口
      method: 'get'          //方法类型
    })
  }

后端接口：   

控制层：

@RequestMapping("/C")
   public Result C()
   {
       OptionsVO result = demService.method();
       return Result.success(result);
   }


业务层：

@Override
public OptionsVO method() {

    //通过查询老婆表获取老婆列表
    List<Wife> wifeList = wifeMapper.selectAllWife();

    //老婆和孩子数据获取并展示数据
    List<WifeVO>  wifeVOList = new ArrayList<>();

    for(Wife wife:wifeList){

       //根据组件ID来查询该老婆下对应的孩子数据
      List<Babes> babesList = babesMapper.selectAllBabes(wife.getWifeId());   

      //封装获取到的孩子信息，并返回前端展示
      List<BabesVO>  babesVOList = new ArrayList<>();

          for(Babes babes:babesList) {
              BabesVO babesVO = BabesVO.builder()
                .value(babes.getBabesNo())
                .label(babes.getBabesNo())
                .build();

              babesVOList.add(babesVO);
          }

          //封装老婆及孩子信息 展示到前端
            WifeVO wifeVO =  WifeVO.builder()
                    .value(wife.getId())
                    .label(wife.getWifeName())
                    .children(babesVOList)
                    .build();

        wifeVOList.add(wifeVO);

        }

    //封装返回前端数据
    OptionsVO optionsVO = OptionsVO.builder().options(wifeVOList).build();

    return optionsVO;

    }



//实体类及VO

@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class WifeType extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** 老婆-主键 */
    private String id;

    /** 老婆编号 */
    private String wifeId;

    /** 老婆名称 */
    private String wifeName;

}

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Babes extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** 孩子表主键 */
    private String id;

    /** 老婆编号(孩子的parentID) */
    private String wifeId;

    /** 孩子名 */
    private String BabesNo;

}

@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class WifeVO extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** 组件类型value */
    private String value;

    /** 组件类型label */
    private String label;

    /** 封装组件版本信息集合 **/
    List<BabesVO> children;

}

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class BabesVO extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** value */
    private String value;

    /** label */
    private String label;

}

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class BabesVO extends BaseEntity
{
    private static final long serialVersionUID = 1L;

    /** value */
    private String value;

    /** label */
    private String label;
}