vue2.0 sélectionne tout et inverse la sélection dans le tableau

Cette fois je vais vous apporter la sélection complète et la sélection inversée de vue2.0 dans le tableau Quelles sont les précautions pour la sélection complète et la sélection inversée de vue2.0 dans le tableau Voici un cas pratique, prenons-le ? un regard.

Comment est-il mis en œuvre ?

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: '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;
}
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 './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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente une cascade à trois niveaux

Comment créer un environnement webpack avec vue et node

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!