Detailliertes Beispiel dafür, wie vue2.0 die vollständige Auswahl und die umgekehrte Auswahl in der Tabelle implementiert

In diesem Artikel wird hauptsächlich der Beispielcode von vue2.0 vorgestellt, um die vollständige Auswahl und die inverse Auswahl in der Tabelle zu implementieren. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Git-Adresse der Demo: ShoppingCart

Seiteneffekt:

Wie wird es konkret implementiert?

Über die Verwendung von localstorage zum Speichern von Seiteninformationen wurde bereits darüber geschrieben, wie ein Projekt erstellt wird, daher wird Xiaoying es hier nicht wiederholen. Tatsächlich handelt es sich nur um eine geringfügige Änderung basierend auf dem vorherigen Artikel:

App.vue-Datei

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

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

Verwandte Empfehlungen:

Js implementiert alle Front-End-Auswahlen und inversen Auswahlen

jQuery implementiert alle Auswahlen und inverse Auswahl von Kontrollkästchen Inverse Auswahl

Vollständige Auswahl und inverse Auswahl implementiert durch jquery_jquery

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie vue2.0 die vollständige Auswahl und die umgekehrte Auswahl in der Tabelle implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!