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

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

 1 <template>
 2     <el-container>
 3           <el-form-item label="选择老婆们和孩子们：" >
 4                                        <el-cascader
 5                                        style="width: 200px"
 6                                        @change="handleChange"
 7                                        :options="defaultOptions"
 8                                        v-model="wifesAndBabes"
 9                                        clearable>
10                                        </el-cascader>
11                                  </el-form-item>
12     </el-container>
13 </template>
14 
15 
16 
17  export default {
18 
19           //封装数据
20     data() {
21       return {
22 
23              defaultOptions: [],
24 
25                  }；
26                },
27 
28   //页面加载前执行方法
29      created(){
30         this.showOptions();     //默认获取后端传至前端的下拉框联查数据
31     },
32 
33         //方法封装区
34         methods: {
35        
36 showOptions(){
37        //执行调用后端接口方法selectNextWifesAndBabes
38          selectNextWifesAndBabes().then(response => {
39        //将获取的后端数据封装在defaultOptions 里
40          this.defaultOptions = response.data.options;
41       //工作台打印
42          console.log("获取的封装值为："+this.defaultOptions);
43         });
44      },
45 
46       },
47   }
48 
49 
50 注意：此方法默认在 import{调后端接口方法} from "指定文件位置"
51   //获取多级联查条件数据
52   export function selectNextWifesAndBabes() {
53     return request({
54       url: '/a/B/C',           //后端接口
55       method: 'get'          //方法类型
56     })
57   }

后端接口：   

控制层：

@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;
}

标签：el,vue,封装,String,老婆,private,label,value,选择器
来源： https://www.cnblogs.com/pureray-hui/p/15248587.html