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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
pdo中使用参数化查询sql
2011/08/11 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Javascript的比较汇总
2016/07/25 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
jQuery使用方法
2017/02/04 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
借款协议书范本
2014/04/22 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL