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