mintui全選反選

 vue復選框使用方法

　　選中的值會存入v-model綁定的數組中

全選反選

1、當全選按鈕選上時，將arrList所有的value值放入 checkedList

2、當所有選項都選中時，全選按鈕也自動被選中，有一個沒被選中時，全選按鈕自動取消選中

 

以下為小demo的完整代碼

　　　　<div class="pdt25">
            <div>
                <div class="item" v-for="item in arrList" :key='item.orderNo'>
                    <label class="mint-checklist-label">
                        <span class="mint-checkbox">
                            <input type="checkbox" class="mint-checkbox-input" :value='item.orderNo' v-model='checkedList' @change="selected(item)">
                            <span class="mint-checkbox-core"></span>
                        </span>
                    </label>
                    <div class="info">
                        <div class="title">{{item.title}}</div>
                        <div class="price">{{item.price}} 元</div>
                    </div>
                    
                </div>

            </div>
        </div>
        <div class="bottom">
            <label class="mint-checklist-label">
                <span class="mint-checkbox" >
                    <input type="checkbox" class="mint-checkbox-input" vlaue='all' v-model='checkedAll' @change='changeState'>
                    <span class="mint-checkbox-core"></span>
                </span>
                <span class="mint-checkbox-label">全選</span>
            </label>
            <div class="total-money">合計：{{totalMoney}}元</div>
        </div> 

　　data(){
        return {
            totalMoney:0,
            checkedAll:false,
            checkedList:[],
            arrList:[
                {orderNo:'1', title:'小熊杯子350ml', price:100},
                {orderNo:'2', title:'小兔杯子350ml', price:100},
                {orderNo:'3', title:'斑馬杯子350ml', price:100},
                {orderNo:'4', title:'玻璃杯子350ml', price:100}
            ]
        }
    },
    methods:{
        changeState(){
            this.checkedList=[]
            this.totalMoney=0
            if(this.checkedAll==true){
                this.arrList.forEach( item => this.checkedList.push(item.orderNo))
                this.arrList.forEach(item => this.totalMoney+=item.price)
            }
            else{
                this.totalMoney=0
            }
            
        },
        selected(item){
            var a=this.checkedList.some(arr => {
                return arr==item.orderNo
            })
            if(a){
                this.totalMoney+=item.price
            }else{
                this.totalMoney-=item.price
            }
            
        }
    },
    watch:{
        checkedList:{
            handler(){
                if(this.checkedList.length==this.arrList.length){
                    this.checkedAll=true
                }else{
                    this.checkedAll=false
                }
            },
            deep:true
        }
    }