其实在去年小颖已经写过一篇: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">¥{{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中实现全选和反选的更多相关文章
-
vue2.0在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
-
原生js中实现全选和反选功能
<!DOCTYPE html> <html> <head lang="en"> <meta char ...
-
jquery中的全选、反选、全不选和单删、批删
HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...
-
vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
-
Android中购物车的全选、反选、问题和计算价格
此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...
-
【jquery】一个简单的单选、多选、全选、反选、删除的小功能
对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...
-
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...
-
使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部:
使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...
-
实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中
上图是实现效果. 下面贴代码 表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果. <th> <input id="allboxs&q ...
随机推荐
-
解决java使用https协议请求出现证书不信任问题(PKIX path building failed)
解决https请求时出现pkix path building fail错误 方法 将submail.cer 安全证书导入到java中的cacerts证书库 (sumail是我从https://api. ...
-
[转] - bashrc与profile的区别
bashrc与profile的区别 要搞清bashrc与profile的区别,首先要弄明白什么是交互式shell和非交互式shell,什么是login shell 和non-login shell. ...
-
从0开始学java——Tomcat的安装及其常见错误排查(zz)
来源: <http://www.cnblogs.com/xdp-gacl/p/3729033.html> 学习web开发,为什么必须要先装一个WEB服务器? 在本地计算机上随便创建一个we ...
-
AndroidManifest笔记
1.android:configChanges如果配置了这个值,比如"orientation",在屏幕旋转时会调用Activity的onConfigurationChanged,而 ...
-
Fluent NHibernate之旅
Fluent NHibernate 之旅 导航篇: [原创]Fluent NHibernate之旅开篇: [原创]Fluent NHibernate之旅二--Entity Mapping: [原创]F ...
-
HTML&;CSS基础学习笔记1.18-表格的边框
今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧 表格的边框 前面为了方便观察表格单元格的情况,我们给<table>加了border属性.<table>的borde ...
-
android ioctl fuzz,android 本地提权漏洞 android root
目前正在研究android 三方设备驱动 fuzzer , 也就是下图所说的 ioctl fuzzing, 下图是由keen team nforest 大神发布: 欢迎正在研究此方面的人联系我共同交流 ...
-
MongoDB---性能优化---(1)
MONGODB数据架构 升级解决.计划 发现问题 应用server用户数的突然涌入,创建server反应慢 检查server,我发现,每次反应非常慢,至30ops 检查过程 .发现数据库查询缓 ...
-
Android UI 学习 自定义的布局 平滑移动 VelocityTracker()
/** * Helper for tracking the velocity of touch events, for implementing * flinging and other such ...
-
Linux之文件权限属性设置
文件权限属性设置 1.chown命令 chrep命令 chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组. 用户可以是用户或 ...