vue+element级联选择器对接后台数据

Posted ggdong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element级联选择器对接后台数据相关的知识,希望对你有一定的参考价值。

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]

以上是关于vue+element级联选择器对接后台数据的主要内容,如果未能解决你的问题,请参考以下文章

element级联选择器 el-cascader

vue-element-ui-Cascader 级联选择器支持多选---折腾记

基于element ui的级联选择器组件实现的分类后台接口

基于Element Cascader 级联选择器实现动态获取数据

Vue3.0中Element-Plus级联选择器——直接输出所选中的最后一级的数据

Vue3.0中Element-Plus级联选择器——直接输出所选中的最后一级的数据