vue/elementUI CheckBox多选框赋值(设置`el-checkbox-group`以及`v-for`遍历`el-checkbox`)

亦凉 2023-01-03 11:29 259阅读 0赞

## 前言 ##

最近有个功能，需要给项目添加一个多选赋值的功能，项目基于renren-security也就是半js半vue模式的前端。

**需求展示：**

*  给定一个字段，例如技术领域，页面上设置为checkbox多选项。
 *  选择之后，保存json字符串到数据库（直接value的形式）
 *  列表展示直接用json字符串展示
 *  详情页面根据之前选定的json字符串设置对应的选项打勾

**效果展示：**

*  列表  
    ![在这里插入图片描述][20210107232350264.png]
 *  详情  
    ![在这里插入图片描述][20210107232402257.png]
 *  字典表  
    ![在这里插入图片描述][20210107233803446.png]
 *  数据表  
    ![在这里插入图片描述][2021010723383720.png]

## 解决方案 ##

> by zhengkai.blog.csdn.net

#### 定义data ####

*  tagTechnicalList，用于显示有什么`可选项`（需要从字段里面读取，或者直接写固定）
 *  tagTechnicalSelection，用于显示当前用户`选择了什么`
 *  eiSolution，处理的对象

data:{ 
    		eiSolution:{ },
            tagTechnicalList:['发改', '教育', '科技'],
            tagTechnicalSelection:[]
    	},

#### 字典配置 ####

总之只要有地方可以动态取值即可，不需要动态取值也没关系，固定值即可。  
![在这里插入图片描述][20210107232503543.png]  
需要设置字段的`read权限`，使用ajax方法从字典表读取值并赋值到vue的data。

setMultiSelection: function(){ 
    		    vm.tagTechnicalSelection=[];
                $.get(baseURL + "sys/dict/info/5", function(r){ 
                    console.log(r);
                    vm.tagTechnicalList = JSON.parse(r.dict.value);
                });
            },

#### HTML部分 ####

如果你已经有了vue，需要引入element-ui

<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.css">
        
        <script src="https://cdn.staticfile.org/element-ui/2.14.1/index.js"></script>

html的`重点`之一在这：设置`el-checkbox-group`以及`v-for`遍历`el-checkbox`

<el-checkbox-group class="checkbox-inline" v-model="tagTechnicalSelection" v-for="item in tagTechnicalList">
    	<el-checkbox :label="item" :key="item">{
       {item}}</el-checkbox>
    </el-checkbox-group>

html的`重点`之二，

saveOrUpdate: function (event) { 
    		    //多选处理：把多选的值化为string存起来 by zhengkai.blog.csdn.net
                vm.eiSolution.tagTechnical=JSON.stringify(this.tagTechnicalSelection);
                console.log(JSON.stringify(vm.eiSolution));
    			//下面的没什么不同
    		    $('#btnSaveOrUpdate').button('loading').delay(1000).queue(function() { 
                    var url = vm.eiSolution.id == null ? "sys/eisolution/save" : "sys/eisolution/update";
                    $.ajax({ 
                        type: "POST",
                        url: baseURL + url,
                        contentType: "application/json",
                        data: JSON.stringify(vm.eiSolution),
                        success: function(r){ 
                            if(r.code === 0){ 
                                 layer.msg("操作成功", { icon: 1});
                                 vm.reload();
                                 $('#btnSaveOrUpdate').button('reset');
                                 $('#btnSaveOrUpdate').dequeue();
                            }else{ 
                                layer.alert(r.msg);
                                $('#btnSaveOrUpdate').button('reset');
                                $('#btnSaveOrUpdate').dequeue();
                            }
                        }
                    });
    			});
    		},

[20210107232350264.png]: /images/20221119/369ab3b94b31495e95bb7eb31483cf01.png
[20210107232402257.png]: /images/20221119/2b7266523cb14fbfa2ab2f30af13939f.png
[20210107233803446.png]: /images/20221119/7c7797b851cc4a958c8ac274f5277c10.png
[2021010723383720.png]: /images/20221119/fae8bf9a20b04458818a7f9c477938e3.png
[20210107232503543.png]: /images/20221119/d709b38783e94158acbc13f3d21f1d9e.png