前端：Element UI 多选框组用法笔记
生活随笔
收集整理的這篇文章主要介紹了
前端：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及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識
總結
以上是生活随笔為你收集整理的前端：Element UI 多选框组用法笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VirtualBox安装VBoxGues
- 下一篇： html+制作动态主题,动态HTML的制