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

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

一、前端：

1、参数说明

prop：字段值
v-model：当前值（复选框选中的值）
v-for：循环
key：唯一值（避免label元素复用）
label：对应值
{{ }}：显示值
disabled：禁用不可选择

<el-row>
  <el-col :span="24">
    <el-form-item label="药品类别" prop="drugClassesCode">
        <el-checkbox-group v-model="checked1" >
          <el-checkbox disabled
             v-for="(drug,index) in drugOptions"
             :key="index"
             :label="drug.paraValue">
             {{ drug.paraName }}
          </el-checkbox>
        </el-checkbox-group>
    </el-form-item>
  </el-col>
</el-row>

二、Vue写法：

  //渲染数据
  data() { 
    return {
      //药品分类字典值
      drugOptions: [],
      //复选框选中的值
      checked1:[],
     };
  },
  //页面初始化数据
  created() {
    //查询药品分类字典值 'CV0071'
    this.getBasicDictListByParaValue("CV0071").then(response => {
      this.drugOptions = response.data;
    });
  }, 
  methods: {
  			//详情方法
            showData(id) {
                getCjYpCyjyInfo(id).then((response) => {
                    this.form = response.data;
                    //复选框选中数组中添加元素
                    this.checked1.push(this.form.drugClassesCode);
                })
            },
        }

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

五、效果展示：