前言

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

需求展示：

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

效果展示：

• 列表
  
• 详情
  
• 字典表
  
• 数据表
  

解决方案

by zhengkai.blog.csdn.net

定义data

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

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

字典配置

总之只要有地方可以动态取值即可，不需要动态取值也没关系，固定值即可。

需要设置字段的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();
                        }
                    }
                });
			});
		},