vue2.0中vue-cli如何實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格

這篇文章給大家分享的是有關(guān)vue2.0中vue-cli如何實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

由于工作的需要并鑒于網(wǎng)上的vue2.0中vue-cli實(shí)現(xiàn)全選、單選方案不合適，自己寫了一個(gè)簡(jiǎn)單實(shí)用的。就短短的126行代碼。

<template>

  <div>

    <table>

      <tr>

        <td><input type="checkbox" v-model="checkAll">全選({{checkedCount}})</td>

        <td>產(chǎn)品名稱</td>

        <td>價(jià)格</td>

        <td>數(shù)量</td>

      </tr>

      <tr v-for="(item,$index) in lists">

        <td><span v-show="checkedCount===lists.length || item.checked===true">我被選中</span><input type="checkbox" :value="item.id" v-model="checked" @click="currClick(item,$index)"></td>

        <td>{{item.productName}}</td>

        <td>{{item.price}}</td>

        <td>{{item.count}}</td>

      </tr>

      <tr>

        總價(jià)：{{totalMoney}}

      </tr>

    </table>

  </div>

</template>

<script>

  export default{

    data() {

      return {

        checked:[],

        totalPrice:[],

        lists : [

          {

            productName:'產(chǎn)品1',

            price:'24',

            count:'3',

            id:1

          },

          {

            productName:'產(chǎn)品2',

            price:'25',

            count:'6',

            id:2

          },

          {

            productName:'產(chǎn)品3',

            price:'54',

            count:'7',

            id:3

          }

        ]

      }

    },

    computed:{

      totalMoney:function(item,index){

        let sum = 0;

        for(let i=0;i<this.totalPrice.length;i++){

          sum += this.totalPrice[i];

        };

        return sum;

      },

      checkAll: {

        get: function() {

          return this.checkedCount == this.lists.length;

        },

        set: function(value){

          var _this = this;

          if (value) {  

            this.totalPrice = [];

            this.checked = this.lists.map(function(item) {

              item.checked = true;

              let total = item.price*item.count;

              _this.totalPrice.push(total);

              return item.id

            })

          }else{

            this.checked = [];

            this.totalPrice=[];

            this.lists.forEach(function(item,index){

              item.checked = false;

            });

          }

        }

      },

      checkedCount: {

        get: function() {

          return this.checked.length;

        }

      }

    },

    methods:{

      currClick:function(item,index){

        var _this = this;

        if(typeof item.checked == 'undefined'){

          this.$set(item,'checked',true);

            let total = item.price*item.count;

            this.totalPrice.push(total);

            console.log(this.totalPrice);

        }else{

          item.checked = !item.checked;

          if(item.checked){

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }else{

            this.totalPrice = [];

            this.lists.forEach(function(item,index){

              if(item.checked){

                let total = item.price*item.count;

                _this.totalPrice.push(total);

              }

            });

          }

        }

      }

    }

  }

</script>

<style>

  tr td{

    width:200px;

    background: #eee;

    padding:10px 0;

  }

 

</style>

效果：

感謝各位的閱讀！關(guān)于“vue2.0中vue-cli如何實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！