废话不多说,直接上代码,复制即用!
一、前端:
1、参数说明
v-model:当前值
v-for:循环
key:唯一值(避免label元素复用)
label:显示值
value:交互传输值
<el-row>
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
<el-form-item label="计划状态" prop="planStatus">
<el-select v-model="form.planStatus" placeholder="请选择计划状态" clearable size="small" style="width: 150px">
<el-option
v-for="(status,index) in statusOptions"
:key="index"
:label="status.paraName"
:value="status.paraValue"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
二、Vue写法:
//渲染数据
data() {
return {
//计划状态字典值
statusOptions: [],
};
},
//页面初始化数据
created() {
//查询计划状态字典值 'JH_STATUS'
this.getBasicDictListByParaValue("JH_STATUS").then(response => {
this.statusOptions = response.data;
});
},
三、Vue调用js中的方法:
// 根据paraValue获取下级分类列表
export function getBasicDictListByParaValue(paraValue) {
return request({
url: '/xxx/xxx/xxxxx/' + paraValue,
method: 'get'
})
}
四、后端:
@GetMapping({"/xxxxx/{paraValue}"})
public AjaxResult getlistByPid(@PathVariable("paraValue") String paraValue) {
SysBasicDict sysBasicDict = new SysBasicDict();
sysBasicDict.setParaValue(paraValue);
List<SysBasicDict> list = this.sysBasicDictService.selectListByParaValue(sysBasicDict);
return AjaxResult.success(list);
}
五、效果展示: