后台接口:
首先是一级
xml
<select id="selectLevel" resultMap="BaseResultMapS">
SELECT DISTINCT cl.`parent_name`,cl.`parent_id`
FROM t_complaint_level cl
</select>
BaseResultMapS这是一个结果集合,封装自己需要的数据,这里就不贴了!
mapper:
List<Complaints> selectLevel();
这个泛型的实体要和你封装的结果集的实体对应好!
service:
public RestResult selectLevel() {
List<Complaints> complaints = complaintMapper.selectLevel();
return new RestResultBuilder().setCode(0).setMsg("请求成功").setData(complaints).build();
}
你们不要管我返回的封装的统一的返回方式,你们按照自己定义的返回值来返回相应的值:
controller层调用就好了
返回结果:
{
"code": 0,
"msg": "请求成功",
"data": [
{
"level": null,
"parentName": "直通车不专业",
"parentId": 1,
"complaintName": null
},
{
"level": null,
"parentName": "直通车没人管",
"parentId": 10,
"complaintName": null
},
]
}
前端vue(博主这边用的是form表单的样式哦!):
<FormItem label="客诉大类别" prop="parentName">
<Select @on-change="selectLevel" v-model="modifierForm.level" placeholder="Select your level" style="width: 300px">
<Option v-for="levelId in levels" :label="levelId.parentName" :value="levelId.parentId" :key="levelId.parentId">
{{levelId.parentName}}
</Option>
</Select>
</FormItem>
然后去你的data里面定义一个:
//客诉大类别
levels: [],
然后去你要显示的那个页面的点击事件调用这个接口,拿到这个接口的数据,我这边是点击修改调出来这个接口的数据,那我就写在了,点击修改的这个事件里面:
//大类
API.complaintList.selectLevel(this.params).then(({
data
}) => {
if (data && data.code == 0) {
this.levels = data.data;
} else {
this.$Message.error(data.msg);
}
}).catch((data) => {
this.$Message.error('连接失败，请检查网络！');
});
this.modifierForm.level = params.row.level;
这样你的一级就能渲染数据进去了,
下面是二级,二级相对来说说就踩坑比较多了
后台接口:
xml:
<select id="getLevelName" resultMap="BaseResultMapVo" parameterType="java.util.HashMap">
SELECT DISTINCT cl.* FROM t_complaint_level cl
<trim prefix="where" prefixOverrides="AND|OR">
cl.`parent_id` = #{parentId,jdbcType=INTEGER}
</trim>
</select>
mapper:
//查看小类列表
List<ComplaintLevel> getLevelName(Map params);
service:
public RestResult getLevelName(Map params) {
if(params.get("parentId") !=null){
Integer level = Integer.valueOf(String.valueOf(params.get("parentId")));
params.put("level",level);
List<ComplaintLevel> complaintLevels =complaintLevelMapper.getLevelName(params);
//这里最好是和上面一级类别返回的数据一样,不然数据不好渲染,可能是我没渲染好,你们也可以封装返回一个map集合
return new RestResultBuilder().setCode(0).setMsg("请求成功").setData(complaintLevels).build();
}
return new RestResultBuilder().setCode(-1).setMsg("一级不存在").setData(null).build();
}
controller直接调用即可:
测试结果
{
"code": 0,
"msg": "请求成功",
"data": [
{
"complaintIds": 16,
"parentId": 4,
"complaintName": "不主动"
}
]
}
这里是需要传一个:parentId的,所以思路很清晰了,前台就需要你把一级下拉的那个id给传到后台来,才能拿到这个数据,不多说,看前端代码:
vue:
<FormItem label="客诉小类别" prop="complaintName" v-if="modifierForm.level != null">
<select v-model="modifierForm.sonLevel" disabled placeholder="Select your pkId" style="width:180px">
<option v-for="complaintNameId in levelNames" :label="complaintNameId.complaintName" :value="complaintNameId.complaintIds" :key="complaintNameId.complaintIds">
{{complaintNameId.complaintName}}
</option>
</select>
</FormItem>
这边博主踩坑很多,不知道是不是iview插件内部的原因,我的select 和option 只要写成和ivew官方的大写的样式二级下拉就渲染不了数据,我这边没办法了就使用了小写,用了小写就不是iview的样式了,你需要自己去调样式!当然你们可以尝试去使用iview的样式,然后渲染数据
还是一样的我这边显示在修改点击之后的那个modal里面的,和一级类别一样,所以也一定要在修改的那个点击事件里面调用这个接口,不然是拿不到数据的!
同时需要在你的data里面定义一个对象:
会将你的数据存到这个对象里面,然后从对象里面取出,这个对象里面的数据相当于一个中转站的作用!
params1: {
level: 0,
parentId: 0,
},
调用:
this.params1.parentId = params.row.level;
//小类
API.complaintList.getLevelName(this.params1).then(({
data
}) => {
if (data && data.code == 0) {
this.levelNames = data.data;
} else {
this.$Message.error(data.msg);
}
}).catch((data) => {
this.$Message.error('当前没有判责');
});
this.modifierForm.sonLevel = HiddenTrouble.sonLevel;
这样两级就都能显示数据了!感谢博主吧!
当然这样你会发现自己代码在报错,现在只是一个显示的功能做出来了,既然做这种级联的咋们就不仅仅是要显示!肯定要级联能修改,上面我的一级类别上定义了一个点击改变的事件,接下来就写这个事件!
//点击客诉大类别
selectLevel() {
this.modifierForm.parentId = this.modifierForm.level;
this.params1.parentId = this.modifierForm.parentId;
//小类
API.complaintList.getLevelName(this.params1).then(({
data
}) => {
if (data && data.code == 0) {
this.levelNames = data.data;
} else {
this.$Message.error(data.msg);
}
}).catch((data) => {
this.$Message.error('当前没有判责');
});
},
这样就大工告成了!
