vue2.0在table中实现全选和反选的示例代码


Posted in Javascript onNovember 04, 2017

其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选

小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻

demo的  git 地址:ShoppingCart

页面效果:

vue2.0在table中实现全选和反选的示例代码

具体怎么实现的呢?

使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动:

vue2.0在table中实现全选和反选的示例代码

App.vue文件

<template>
 <div id="app">
  <router-view/>
 </div>
</template>
<script>
export default {
 name: 'app'
}

</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
}

li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
p,
blockquote,
figure,
form,
fieldset,
input,
legend,
pre,
abbr,
button {
 margin: 0;
 padding: 0;
}

ul,
ol {
 list-style: none;
 margin: 0;
 padding: 0;
}

*,
*::before,
*::after {
 box-sizing: border-box;
}

div,
p,
dl,
dt,
dd {
 margin: 0;
 padding: 0;
}

a {
 color: inherit;
 text-decoration: none;
}

.checkout-title {
 position: relative;
 margin-bottom: 41px;
 text-align: center;
}

.checkout-title::before {
 position: absolute;
 top: 50%;
 left: 0;
 content: "";
 width: 100%;
 height: 1px;
 background: #ccc;
 z-index: 0;
}

.checkout-title span {
 position: relative;
 padding: 0 1em;
 background-color: #fff;
 font-family: "moderat", sans-serif;
 font-weight: bold;
 font-size: 20px;
 color: #605F5F;
 z-index: 1;
}
</style>

home.vue文件

<template>
 <div class="container">
  <div class="checkout-title">
   <span>购物车</span>
  </div>
  <table class="product_table">
   <tbody>
    <template v-for="(list,index) in table_list">
     <tr>
      <td width="7%" min-width="94px" v-if="index===0">
       <input type="checkbox" v-model='checked' v-on:click='checkedAll'></td>
      <td width="7%" v-if="index!==0">
       <input type="checkbox" v-model='checkList' :value="list.id">
      </td>
      <td width="43%">{{list.product_inf}}</td>
      <td width="10%" v-if="index===0">{{list.product_price}}</td>
      <td width="10%" v-if="index!==0">¥{{list.product_price}}</td>
      <td width="10%">{{list.product_quantity}}</td>
      <td width="10%">{{list.total_amount}}</td>
      <td width="20%" v-if="index===0">编辑</td>
      <td width="20%" v-if="index!==0">
       <a href="#" rel="external nofollow" rel="external nofollow" class="update">修改</a>
       <a href="#" rel="external nofollow" rel="external nofollow" class="delete">删除</a>
      </td>
     </tr>
    </template>
   </tbody>
  </table>
  <div class="price_total_bottom">
   <div class="price_total_ms">
    <label>合计:{{allProductTotal}}</label>
    <router-link to="/userAddress">结账</router-link>
   </div>
  </div>
 </div>
</template>
<script>
import userAddress from './address'
export default {
 components: {
  userAddress
 },
 data() {
  return {
   table_list: [{
    'id': 0,
    'product_inf': '商品信息',
    'product_price': '商品金额',
    'product_quantity': '商品数量',
    'total_amount': '总金额'
   }, {
    'id': '1',
    'product_inf': '女士银手链',
    'product_price': 120,
    'product_quantity': 200,
    'total_amount': 24000
   }, {
    'id': '2',
    'product_inf': '女士银手镯',
    'product_price': 380,
    'product_quantity': 200,
    'total_amount': 72000
   }, {
    'id': '3',
    'product_inf': '女士银耳环',
    'product_price': 100,
    'product_quantity': 200,
    'total_amount': 20000
   }],
   checked: false,
   allProductTotal: null,
   checkList: ['1', '3']
  }
 },
 methods: {
  checkedAll: function() {
   var _this = this;
   console.log(_this.checkList);
   if (_this.checked) { //实现反选
    _this.checkList = [];
   } else { //实现全选
    _this.checkList = [];
    _this.table_list.forEach(function(item, index) {
     if (index > 0) {
      _this.checkList.push(item.id);
     }
    });
   }
  }
 },
 watch: { //深度 watcher
  'checkList': {
   handler: function(val, oldVal) {
    if (val.length === this.table_list.length - 1) {
     this.checked = true;
    } else {
     this.checked = false;
    }
   },
   deep: true
  }
 }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
 padding: 69px 0 54px 0;
}

table {
 border-collapse: collapse;
 border-color: transparent;
 text-align: center;
}

.product_table,
.product_table tbody {
 width: 100%
}

.product_table tr:first-child {
 background: #ece6e6;
 color: #e66280;
 font-size: 20px;
}

.product_table td {
 border: 1px solid #f3e8e8;
 height: 62px;
 line-height: 62px;
}

.product_table a.update:link,
.product_table a.update:visited,
.product_table a.update:hover,
.product_table a.update:active {
 color: #1CE24A;
}

.product_table a.delete:link,
.product_table a.delete:visited,
.product_table a.delete:hover,
.product_table a.delete:active {
 color: #ffa700;
}

.price_total_bottom {
 font-size: 20px;
 padding: 20px 10px;
}

.price_total_ms {
 text-align: right;
}

.price_total_bottom .price_total_ms label {
 margin-right: 100px;
}

.price_total_bottom .price_total_ms a {
 cursor: default;
 text-align: center;
 display: inline-block;
 font-size: 20px;
 color: #fff;
 font-weight: bold;
 width: 220px;
 height: 54px;
 line-height: 54px;
 border: 0;
 background-color: #f71455;
}

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 #Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 #Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 #Javascript
You might like
解析php防止form重复提交的方法
2013/07/01 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python组合无重复三位数的实例
2018/11/13 Python
Python for循环及基础用法详解
2019/11/08 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
就业推荐自我鉴定
2013/10/06 职场文书
安全生产检查通报
2014/01/29 职场文书
全国道德模范事迹
2014/02/01 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
社区平安建设方案
2014/05/25 职场文书
课内比教学心得体会
2014/09/09 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
纪委立案决定书
2015/06/24 职场文书
采购部2015年度工作总结
2015/07/24 职场文书