Vue + element 实现多选框组并保存已选id集合的示例代码


Posted in Javascript onJune 03, 2020

Vue + element 实现列表复选框并保存已选id集合

1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源
2.初始化tableData集合
3.循环遍历需要显示得值
4.在多选框组上添加chang事件

tableData: [{
   date: '2016-05-02',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄'
  }, {
   date: '2016-05-04',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1517 弄'
  }, {
   date: '2016-05-01',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1519 弄'
  }, {
   date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1516 弄'
  }]
<el-checkbox-group v-model="checkList" @change="ch">
    <div v-for="(c,index) in tableData" :key="index">
     <el-checkbox :label="c.date">{{c.date}}</el-checkbox>
    </div>
   </el-checkbox-group>
ch(){
  console.log(this.checkList)
 },

Vue + element 实现多选框组并保存已选id集合的示例代码

需要反显得话 只要后台将与:label对应得字段用数组返回即可

总结

到此这篇关于Vue + element 实现多选框组并保存已选id集合的示例代码的文章就介绍到这了,更多相关vue element 多选框组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
JavaScript监听键盘事件代码实现
Jun 03 #Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 #Javascript
深入分析jQuery.one() 函数
Jun 03 #jQuery
layui实现显示数据表格、搜索和修改功能示例
Jun 03 #Javascript
微信小程序文章详情功能完整实例
Jun 03 #Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
You might like
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
大学生实习思想汇报
2014/01/12 职场文书
啦啦队口号大全
2014/06/16 职场文书
植树节口号
2014/06/21 职场文书
大学生助学金感谢信
2015/01/21 职场文书
南湾猴岛导游词
2015/02/09 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python