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 相关文章推荐
js 3秒后跳转页面的实现代码
Mar 10 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
js 概率计算(简单版)
Sep 12 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
vue中input的v-model清空操作
Sep 06 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版微信js-sdk支付接口类用法示例
2016/10/12 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
详解vue中组件参数
2018/07/09 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python django生成迁移文件的实例
2019/08/31 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python各种excel写入方式的速度对比
2020/11/10 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
《第一次抱母亲》教学反思
2014/04/16 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
摩登时代观后感
2015/06/03 职场文书