vue.js實現checkbox的全選和反選

摘要：

    一、監聽全選的值的變化，來改變checbox的數組值

    二、監聽選中checkbox的數組值的變化，當某一項checkbox有變化，判斷是否checkbox的數值長度是否和列表數據的長度一致，來改變全選的值。

 

下面來一塊兒看看是怎麼實現的吧：

1、HTML

<template>

    <table class="table table-bordered table-hover text-center" id="tabletList">

            <thead>

                        <tr>

                            <th class="bgColor" width="25px"></th>

                            <th class="bgColor">獲獎時間</th>

                            <th class="bgColor">用戶ID</th>

                            <th class="bgColor">用戶電話號碼</th>

                            <th class="bgColor">獎品</th>

                            <th class="bgColor">用戶地址</th>

                            <th class="bgColor">用戶姓名</th>

                            <th class="bgColor">狀態</th>

                            <th class="bgColor">編輯</th>

                        </tr>

             </thead>

            <tbody>

                        <tr v-for="(x, index) in list">

                            <td><input type="checkbox" class="checkBox" v-model="x.checked" @change="selectSingle(index, x.userId)"></td>

                            <td v-text="x.createTime"></td>

                            <td v-text="x.userId"></td>

                            <td class="uerPhone" v-text="x.phone"></td>

                            <td class="awardStatus">

                                <img :src="x.goodsImg">

                                <p v-text="x.goodsName"></p>

                            </td>

                            <td class="address" v-text="x.address"></td>

                            <td class="userName" v-text="x.name"></td>

                            <td class="userAward" v-text="x.awardStatusStr"></td>

                            <td><a href="javascript:;" @click="modify(index)" class="curEdit">修改</a></td>

                        </tr>

                    </tbody>

</table>

2、js

 

export default {

        data() {

                checked: [],

                allChecked:null,

                checkedCount:0,

                list: [],//後臺傳過來的json數據

                total:{

                    num: 0,

                    page: 0

                },

        },

 

 

methods: {

            selectSingle(index, id) {//單選個input點擊事件

                console.log(index)

                console.log(this.list[index].checked)

                // this.list[index].checked ^= 1

                this.list.forEach((item, i) => {

                    if (item.userId === id && i !== index) {

                        item.checked = this.list[index].checked

                        this.$set(this.list, i, item)

                    }

                })

                if (this.list[index].checked === true) {

                    this.checkedCount ++

                }

            },

            selectAll(event) {//全選

                this.list.forEach((item, i)=> {

                   if(item.checked === true){

                        item.checked = i.checked

                   }

                    item.checked ^= 1

                    this.$set(this.list, i, item)

                })

                if (this.allChecked == true) {

                    this.checkedCount = this.total.num

                }else{

                    this.checkedCount = 0

                }

            },

}

}

 

That's all. 是否是以爲超級簡單。