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 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vue3获取当前路由地址
Feb 18 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php中动态修改ini配置
2014/10/14 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
九种原生js动画效果
2015/11/11 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python中几种自动微分库解析
2019/08/29 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
技能竞赛活动方案
2014/02/21 职场文书
大学生简历求职信
2014/06/24 职场文书
行政管理专业求职信
2014/07/06 职场文书
新闻稿件写作范文
2015/07/18 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python