Vue + element实现业务字典值渲染下拉框并回显

废话不多说，直接上代码，复制即用！

一、前端：

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);
    }

五、效果展示：

六、Vue + element实现业务字典值渲染复选框勾选：

Vue + element实现业务字典值渲染复选框勾选