前端：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
文章推荐程序员效率：画流程图常用的工具程序员效率：整理常用的在线笔记软件远程办公：常用的远程协助软件，你都知道吗？51单片机程序下载、ISP及串口基础知识硬件：断路器、接触器、继电器基础知识
