vue2.0 selects all and inverts selection in table

This time I will bring you the full selection and reverse selection of vue2.0 in the table. What are the precautions for the full selection and reverse selection of vue2.0 in the table? The following is a practical case, let's take a look.

How is it implemented?

How to create the project has already been written in Using localstorage to store page information, 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: '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>

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 './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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS implements three-level cascade

##How to build a webpack environment with vue and node

The above is the detailed content of vue2.0 selects all and inverts selection in table. For more information, please follow other related articles on the PHP Chinese website!