關於前端vue el-cascader級聯選擇器

最簡單的方法，往往才是最有效的方法：前端代碼：

<template>
    <el-container>
          <el-form-item label="選擇老婆們和孩子們：" >
                                       <el-cascader
                                       style="width: 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;
}