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闭包的理解和实例
Aug 12 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 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
pw的一个放后门的方法分析
2007/10/08 PHP
php 面向对象的一个例子
2011/04/12 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
javascript实现简单页面倒计时
2021/03/02 Javascript
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Django中的静态文件管理过程解析
2019/08/01 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
中职生自荐信
2013/10/13 职场文书
团支书的期末学习总结自我评价
2013/11/01 职场文书
初中生物教学反思
2014/01/10 职场文书
浪费资源的建议书
2014/03/12 职场文书
演讲主持词
2014/03/18 职场文书
毕业留言寄语大全
2014/04/10 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
暗恋桃花源观后感
2015/06/12 职场文书