vue2.0이 테이블에서 전체 선택과 역선택을 구현하는 방법에 대한 자세한 예

이 글에서는 테이블에서 전체 선택과 역선택을 구현하기 위한 vue2.0의 샘플 코드를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

demo의 git 주소: ShoppingCart

페이지 효과:

구체적으로 달성하는 방법은 무엇입니까?

로컬 스토리지를 사용하여 페이지 정보를 저장하는 방법은 이미 프로젝트 생성 방법에 대해 작성되었으므로 여기서는 Xiaoying이 반복하지 않겠습니다. 사실 이전 기사인

앱을 기반으로 한 약간의 변경일 뿐입니다. vue 파일 r

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

<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 권장 사항 :

js는 프론트 엔드 전체 선택 및 역 선택

Query가 전체 선택 및 역 선택을 구현합니다.

jquery 전체 선택 및 역선택 구현_jquery

위 내용은 vue2.0이 테이블에서 전체 선택과 역선택을 구현하는 방법에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!