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 设计模式(二) 闭包
May 26 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
vue开发移动端底部导航条功能
Apr 08 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
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python多线程学习资料
2012/12/19 Python
Python之PyUnit单元测试实例
2014/10/11 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python实现登录接口的示例代码
2017/07/21 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
python模糊图片过滤的方法
2018/12/14 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
新郎新娘婚礼答谢词
2014/01/11 职场文书
重点工程汇报材料
2014/08/27 职场文书
学习十八大标语
2014/10/09 职场文书
大雁塔导游词
2015/02/04 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
python在package下继续嵌套一个package
2022/04/14 Python