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 相关文章推荐
JS实现打开本地文件或文件夹
Mar 09 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
vue抽出组件并传值实例
Jul 31 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
DEFER怎么用?
2006/07/01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python正规则表达式学习指南
2016/08/02 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python中的计时器timeit的使用方法
2017/10/20 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
浅析python的Lambda表达式
2019/02/27 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
模具设计与制造专业推荐信
2014/02/16 职场文书
物理力学求职信
2014/02/18 职场文书
欢迎标语大全
2014/06/21 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
八年级作文之友谊
2019/12/02 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
Python使用Web框架Flask开发项目
2022/06/01 Python