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 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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中随机显示图片的函数代码
2011/06/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
Python实现字符串格式化的方法小结
2017/02/20 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
10张动图学会python循环与递归问题
2021/02/06 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
实习自我评价怎么写
2013/12/02 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
素质拓展感言
2014/01/29 职场文书
绿色出行口号
2014/06/18 职场文书
2014年教师节寄语
2014/08/11 职场文书
慈善募捐倡议书
2015/04/27 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
python实现商品进销存管理系统
2022/05/30 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技