前端：Element UI 多选框组用法笔记

举报
IT技术分享社区 发表于 2023/01/15 20:58:34 2023/01/15
【摘要】 ​ 今天给大家分享一下Element UI 多选框组用法笔记，直接上代码！<html> <head></head> <body> <el-form> <el-form-item label="兴趣爱好:"> <el-checkbox-group v-model="form.checkList"> <el-checkbox v-for="item in hobbyLi...

​

 

今天给大家分享一下Element UI 多选框组用法笔记，直接上代码！

<html>
 <head></head>
 <body>
  <el-form> 
   <el-form-item label="兴趣爱好:"> 
    <el-checkbox-group v-model="form.checkList"> 
     <el-checkbox v-for="item in hobbyList" :label="item.id">
       {{item.hobbyName}} 
     </el-checkbox> 
    </el-checkbox-group> 
   </el-form-item> 
  </el-form>
 </body>
</html>






JS文件


var vue = new Vue({
    data: {
        return {
            checkList: [],
            //复选框选中数据 注意一定要为数组类型
            form: {
                hobbyList: [],
                //复选框组列表数据
            }
        }
    },
    created: function() {
        var self = this;
        this.loadHobbyList(); //加载兴趣爱好列表数据
    },
    mounted: function() {},
    methods: {
        //加载兴趣爱好字典列表数据   
        loadHobbyList: function() {
            var self = this;
            $.ajax({
                url: "后台接口地址",
                dataType: 'json',
                data: {},
                type: 'POST',
                success: function(result) {
                    if (result.success) {
                        self.hobbyList = result.data;
                    } else {
                    }
                }
            })
        },
        //保存表单逻辑
        savaForm:function(){
        var hobby="";
        if(self.checkList!=null)        
        {
         //转换为逗号分隔的字符串
         hobby=self.checkList.toString();
         //todo 表单保存逻辑         
        }       
        },
        // 编辑表单 给复选框赋值
        edit: function() {
            var self = this;
            $.ajax({
                url: "后台接口地址",
                dataType: 'json',
                data: {},
                type: 'POST',
                success: function(result) {
                    if (result.success) {
 //result.data.hobby 后台数据库字段符串用逗号分隔
 if ( result.data.hobby != null) {
 self.checkList = result.data.hobby.split(',');
                        }
                    }
                }
            })
        }
    },
});

​

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Element UI 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入