1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong
* @Date: 2019/4/3 10:30 */@Getter@Setterpublic class ServerList{ //值 private String value; //名称 private String label; //子级 private List<ServerList> children;}
2.最主要的就是写sql了,不过幸好有MyBatis有个注解提供给我们使用,方便了许多,如下
@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = ‘0‘")
@Results({
@Result(column = "code",property = "code"),
@Result(column = "code", property = "sub", many = @Many(select = "findListByPid"))
})
List<RegionList> findRegionList();
@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = #{area_code}")
List<RegionList> findListByPid(@Param("area_code") String areaCode);
3.级联选择器样式代码:
<el-form-item label="区/服" prop="regionServers"> <div class="block"> <el-cascader :options="regionServerList" v-model="ruleForm.regionServers" @change="handleChange"> </el-cascader> </div></el-form-item>4.如果涉及到回显的话,返回的值对应的是value才行,如下:
this.ruleForm.regionServers = [data.region, data.server]
原文地址:https://www.cnblogs.com/GGDong/p/10996316.html
时间: 2024-11-05 20:25:26