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(',');                         }                     }                 }             })         }     }, });

您可能还会对下面的文章感兴趣: