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

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

慕课网demo的  git 地址:ShoppingCart

页面效果:

具体怎么实现的呢?

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

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">&yen;{{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="#" class="update">修改</a>
<a href="#" 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>

vue2.0在table中实现全选和反选的更多相关文章

  1. vue2.0实现在table中实现全选和反选

    其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...

  2. 原生js中实现全选和反选功能

    <!DOCTYPE html>      <html>      <head lang="en">          <meta char ...

  3. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  4. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  5. Android中购物车的全选、反选、问题和计算价格

    此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...

  6. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  7. 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中

    上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs&q ...

  8. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  9. ExtJS中,将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

随机推荐

  1. C# 线程池执行操作例子

    public partial class Form1 : Form { CountdownEvent hander = ); public static object lock_action = ne ...

  2. 【FastJSON】使用JSON.toJSONString()-解决FastJson中“$ref 循环引用”的问题

    fastjson 是一个 不错的json格式化工具, 但是在使用时,如果 碰到统一地址对象引用,就会用$ref替代 . 怎么去掉ref呢, 解决方法如下: String mapStr = JSONOb ...

  3. ASP.NET js控制treeview中的checkbox实现单选功能

    ASP.NET js控制treeview中的checkbox实现单选功能 function OnTreeNodeChecked() { var element = window.event.srcEl ...

  4. 【.NET】正则表达式笔记

    很早就听说正则表达式的强大,今天终于一睹它的真容,在这里记下学习时候的笔记,以便以后查看 1.正则表达式 用于描述字符串规则的的特殊的字符(正则表达式本身是字符串,用来描述字符串的相关规则,用于与其他 ...

  5. SDK Manager.exe和AVD Manager.exe缺失,Android SDK Tools在检查java环境时卡住了,未响应卡死!

    之前安装Android Studio的时候根据提示安装了Android SDK,但是发现目录下没有SDK Manager.exe和AVD Manager.exe,导致SDK的一些操作很不方便! 不知道 ...

  6. mysql 用户权限操作

    https://www.cnblogs.com/SQL888/p/5748824.html http://blog.csdn.net/fafa211/article/details/2249217

  7. 爬虫 测试webmagic (一)

    目标:统计斗鱼(www.douyu.com)人数 思路: 1. 目录找到douyu播出的所有游戏 http://www.douyutv.com/directory 2. 借助 chrome 定位到每个 ...

  8. js中forEach,for in,for of的区别

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. iOS Ad hoc

    There's one situation in which you need an Ad Hoc profile, and that's when you want to test Push Not ...

  10. Python 管理 MySQL

    Python MySQLdb 模块 Python pymysql 模块 Python SQLAlchemy 模块 Python ConfigParser 模块 Python 创建 MySQL 配置文件 ...