Exemple détaillé de la façon dont vue2.0 implémente la sélection complète et la sélection inverse dans le tableau

Cet article présente principalement l'exemple de code de vue2.0 pour implémenter la sélection complète et la sélection inverse dans le tableau. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Adresse git de la démo : ShoppingCart

Effet de page :

Comment est-il implémenté spécifiquement ?

L'utilisation du stockage local pour stocker les informations de la page a déjà été écrite sur la façon de créer un projet, donc Xiaoying ne le répétera pas ici. En fait, il s'agit simplement d'un léger changement basé sur l'article précédent : <.>

Fichier App.vue

<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>

fichier home.vue

<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>

Recommandations associées :

Js implémente toutes les sélections frontales et la sélection inverse

jQuery implémente toutes les sélections et inversion des cases à cocher Sélection inverse

Sélection complète et sélection inverse implémentée par jquery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!