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 相关文章推荐
jQuery.holdReady()方法用法实例
Dec 27 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
创建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
帝国cms目录结构分享
2015/07/06 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python获取邮件地址的方法
2015/07/10 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python函数式编程
2017/07/20 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
销售经理岗位职责
2014/03/16 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
大连星海广场导游词
2015/02/10 职场文书
龙猫观后感
2015/06/09 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP