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

VUE 专栏收录该内容
14 篇文章 1 订阅

前言

最近有个功能,需要给项目添加一个多选赋值的功能,项目基于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();
                        }
                    }
                });
			});
		},
  • 0
    点赞
  • 2
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值