1. 后台接口返回的数据肯定要和级联选择器的数据一致, 所以我专门弄个 model 存放返回的值, 如下:/*** @Auther: GGDong
* @Date: 2019/4/3 10:30
*/
- @Getter
- @Setter
- public 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]
来源: http://www.bubuko.com/infodetail-3087958.html