今天給大家分享一下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及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識