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

今天给大家分享一下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