Detailed example of how vue2.0 implements full selection and inverse selection in the table

This article mainly introduces the sample code of vue2.0 to implement full selection and inverse selection in the table. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

demo’s git address: ShoppingCart

Page effect:

How is it achieved?

Using localstorage to store page information has already been written about how to create a project, so Xiaoying will not repeat it here. In fact, it is just a slight change based on the previous article:

App.vue file

<template>
 <p id="app">
  <router-view/>
 </p>
</template>
<script>
export default {
 name: &#39;app&#39;
}

</script>
<style>
#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;
}
</style>

home.vue file

<template>
 <p class="container">
  <p class="checkout-title">
   <span>购物车</span>
  </p>
  <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=&#39;checked&#39; v-on:click=&#39;checkedAll&#39;></td>
      <td width="7%" v-if="index!==0">
       <input type="checkbox" v-model=&#39;checkList&#39; :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>
  <p class="price_total_bottom">
   <p class="price_total_ms">
    <label>合计：{{allProductTotal}}</label>
    <router-link to="/userAddress">结账</router-link>
   </p>
  </p>
 </p>
</template>
<script>
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 = 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
  &#39;checkList&#39;: {
   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>

Related recommendations:

Js implements full selection and inverse selection on the front end

jQuery implements all selection and inverse selection of check boxes

jquery implementation of full selection and inverse selection_jquery

The above is the detailed content of Detailed example of how vue2.0 implements full selection and inverse selection in the table. For more information, please follow other related articles on the PHP Chinese website!