本文主要介绍了vue2.0在table中实现全选和反选的示例代码&＃xff0c;小编觉得挺不错的&＃xff0c;现在分享给大家&＃xff0c;也给大家做个参考。一起跟随小编过来看看吧&＃xff0c;希望能帮助到大家。
demo的 git 地址&＃xff1a;ShoppingCart
页面效果&＃xff1a;
![]()
具体怎么实现的呢&＃xff1f;
使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了&＃xff0c;其实只是在上篇文章的基础上稍微做了改动&＃xff1a;
![]()
App.vue文件
export default {
name: &＃39;app&＃39;
}
#app {
font-family: &＃39;Avenir&＃39;, 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;
}
p,
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;
}
home.vue文件
购物车
| | {{list.product_inf}} | {{list.product_price}} | ¥{{list.product_price}} | {{list.product_quantity}} | {{list.total_amount}} | 编辑 | 修改 删除 |
合计&＃xff1a;{{allProductTotal}}
结账
import userAddress from &＃39;./address&＃39;
export default {
components: {
userAddress
},
data() {
return {
table_list: [{
&＃39;id&＃39;: 0,
&＃39;product_inf&＃39;: &＃39;商品信息&＃39;,
&＃39;product_price&＃39;: &＃39;商品金额&＃39;,
&＃39;product_quantity&＃39;: &＃39;商品数量&＃39;,
&＃39;total_amount&＃39;: &＃39;总金额&＃39;
}, {
&＃39;id&＃39;: &＃39;1&＃39;,
&＃39;product_inf&＃39;: &＃39;女士银手链&＃39;,
&＃39;product_price&＃39;: 120,
&＃39;product_quantity&＃39;: 200,
&＃39;total_amount&＃39;: 24000
}, {
&＃39;id&＃39;: &＃39;2&＃39;,
&＃39;product_inf&＃39;: &＃39;女士银手镯&＃39;,
&＃39;product_price&＃39;: 380,
&＃39;product_quantity&＃39;: 200,
&＃39;total_amount&＃39;: 72000
}, {
&＃39;id&＃39;: &＃39;3&＃39;,
&＃39;product_inf&＃39;: &＃39;女士银耳环&＃39;,
&＃39;product_price&＃39;: 100,
&＃39;product_quantity&＃39;: 200,
&＃39;total_amount&＃39;: 20000
}],
checked: false,
allProductTotal: null,
checkList: [&＃39;1&＃39;, &＃39;3&＃39;]
}
},
methods: {
checkedAll: function() {
var _this &＃61; this;
console.log(_this.checkList);
if (_this.checked) { //实现反选
_this.checkList &＃61; [];
} else { //实现全选
_this.checkList &＃61; [];
_this.table_list.forEach(function(item, index) {
if (index > 0) {
_this.checkList.push(item.id);
}
});
}
}
},
watch: { //深度 watcher
&＃39;checkList&＃39;: {
handler: function(val, oldVal) {
if (val.length &＃61;&＃61;&＃61; this.table_list.length - 1) {
this.checked &＃61; true;
} else {
this.checked &＃61; false;
}
},
deep: true
}
}
}
.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;
}
相关推荐&＃xff1a;
京公网安备 11010802041100号