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 10 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
vue-ajax小封装实例
Sep 18 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
详解Python中的日志模块logging
2015/06/19 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
使用python实现生成用户信息
2017/03/20 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
幼儿园优秀教师事迹
2014/02/13 职场文书
献爱心标语
2014/06/21 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
走进科学观后感
2015/06/18 职场文书
生活小常识广播稿
2015/08/19 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书