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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Ajax实现三级联动效果
Oct 05 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之面向对象
2013/05/15 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
input按钮的事件处理大全
2010/12/10 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python奇偶行分开存储实现代码
2018/03/19 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
简单了解python数组的基本操作
2019/11/26 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python递归实现打印多重列表代码
2020/02/27 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
室内设计专业毕业生求职信
2014/05/02 职场文书
企业负责人任命书
2014/06/05 职场文书
物理教育专业求职信
2014/06/25 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript