vue.js实现的全选与全不选功能示例【基于elementui】


Posted in Javascript onDecember 03, 2018

本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考,具体如下:

elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办?

首先渲染页面:

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<tbody v-for="item in orderData">
 <tr>
  <td class="order-num" colspan="7">
   <el-checkbox v-model="item.checkModel" @change="handleCheckItemChange" style="vertical-align:top;margin-top:20px;"></el-checkbox>
   <div class="num">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >订单号:{{item.orderNumber}}</a>
    <p>商户单号:{{item.shopNumber}}</p>
   </div>
  </td>
  <td class="order-action" colspan="2">
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >查看详情</a>-<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >备注</a>-<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >加星</a>
  </td>
 </tr>
 <tr>
  <td>
   <div class="pic">
    <img :src=item.orderPic alt="">
   </div>
   <div class="info">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{item.name}}</a>
    <p>{{item.size}}</p>
    <p>商品来源:{{item.from}}</p>
   </div>
  </td>
  <td>{{item.number}}</td>
  <td>{{item.price}}</td>
  <td>-</td>
  <td>{{item.company}}</td>
  <td>
   <p>{{item.address}}</p>
   <p>({{item.phone}})</p>
  </td>
  <td>{{item.date}}<br />{{item.time}}</td>
  <td>{{item.state}}</td>
  <td>{{item.pay}}<br /><span v-if="item.postCost">(运费:{{item.postCost}})</span></td>
 </tr>
</tbody>

初始化data数据:

checkAll:false,
checkedAllShops:[],
checkItemData:[],
orderData:[
 {
  checkModel:false,
  orderNumber:'2017081618322542542',
  shopNumber:'2017081618322542542',
  orderPic:'../../../../static/images/realtimeprofile01.png',
  name:'【商城】贴轻松穴位艾灸贴',
  size:'5贴*盒',
  from:'本店商品',
  number:'10',
  price:'200.00',
  company:'蒂花之秀',
  address:'童话镇',
  phone:'12345678910',
  date:'2018-1-12',
  time:'09:30:00',
  state:'订单关闭',
  pay:'400.00',
  postCost:'10'
 },{
  checkModel:false,
  orderNumber:'2017081618322542542',
  shopNumber:'2017081618322542542',
  orderPic:'../../../../static/images/realtimeprofile01.png',
  name:'【商城】贴轻松穴位艾灸贴',
  size:'5贴*盒',
  from:'本店商品',
  number:'10',
  price:'200.00',
  company:'蒂花之秀',
  address:'童话镇',
  phone:'12345678910',
  date:'2018-1-12',
  time:'09:30:00',
  state:'订单关闭',
  pay:'400.00',
  postCost:'10.00'
 }
]

相关方法:

handleCheckAllChange(val){
 this.orderData.map((item,i)=>{
  item.checkModel = val;
 })
},
handleCheckItemChange(val){
 for(let i = 0,l = this.orderData.length;i < l;i ++){
  if(this.orderData[i].checkModel !== val){
   this.checkAll = false;
   return;
  }
 }
 this.checkAll = val;
}

css代码就不贴出来了,不好看,哈哈

感兴趣的朋友还可以使用本站如下在线工具测试运行效果:

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
创建Vue项目以及引入Iview的方法示例
Dec 03 #Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 #Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 #Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 #Javascript
从零开始实现Vue简单的Toast插件
Dec 03 #Javascript
使用NestJS开发Node.js应用的方法
Dec 03 #Javascript
写gulp遇到的ES6问题详解
Dec 03 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
浅谈Express异步进化史
2017/09/09 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
django定期执行任务(实例讲解)
2017/11/03 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python登录注册验证功能实现
2018/06/18 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python读取指定字节长度的文本方法
2019/08/27 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
Europcar比利时:租车
2019/08/26 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
干部行政关系介绍信
2014/01/17 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
浅析Python实现DFA算法
2021/06/26 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android