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

最新推荐文章于 2024-05-09 11:23:36 发布

IT技术分享社区

最新推荐文章于 2024-05-09 11:23:36 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签：列表 js javascript 编程语言 html

欢迎转载，请保留作者的链接，文章会同步更新到微信公众号：欢迎转载，请保留作者的链接，文章会同步更新到个人微信公众号：小明互联网技术分享社区，个人网站 https://programmerblog.xyz/

本文链接：https://blog.csdn.net/xishining/article/details/111306036

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

今天给大家分享一下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(',');
                        }
                    }
                }
            })
        }
    },
});

IT技术分享社区

个人博客网站：https://programmerblog.xyz