|
<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://
|
