前端：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 多选框组用法笔记相关推荐

easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器
eazy ui 复选框单选重点 (Top highlight) Pick me! Pick me! No, pick me! In today's cheat sheet we will be lo ...
elementui复选框组使用与遇到的问题
elementui复选框组使用与遇到的问题 1.复选框组使用 2.默认值的设置 3.遇到的问题 3.1.导致问题的写法 3.2.正常可以使用的写法 4.事件冒泡的问题今天有个弹出窗编辑的时候elem ...
Element el-check 多选框详解
点此查看全部文字教程.视频教程.源代码本文目录 1. 用途 2. 普通多选框 3. 带边框的多选框 4. 多选框组 5. 按钮样式的多选框组 6. 多选框组选中数量限制 7. 选项通过变量自动生成 ...
YIi2中checkboxOptions前选框的用法
这是checkboxOptions前选框的用法 use yii\grid\GridView; $this->registerJs(" $('#selection_all').click ...
ReactHooks+Antd Checkbox Group多选框组单独禁用其中选项
antd官方文档中Checkbox Group给出的api如下: 据图可知,其中Group 的 api 只有一个disabled,它的作用是使整个group选项全部失效,达不到我们的效果,但是Chec ...
HTML中单复选框的用法
今天看了看单复选框的用法,感觉很是好玩儿 ,所以赶快来把学会的分享下! 首先,在使用表单设计调查问卷时,为了减少用户的操作,使用选择框是一个不错的选择. HTML中有两种选择框,分别为单选框和复选框. ...
用java设置复选框_Java Swing组件复选框JCheckBox用法示例
这篇文章主要介绍了Java Swing组件复选框JCheckBox用法,结合具体实例形式分析了Swing复选框JCheckBox简单用法与相关操作注意事项,需要的朋友可以参考下本文实例讲述了Java ...
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...

前端：Element UI 多选框组用法笔记

前端：Element UI 多选框组用法笔记相关推荐

最新文章

热门文章