首页 > 代码库 > vue.js实现checkbox的全选和反选

vue.js实现checkbox的全选和反选

摘要:

    1、监听全选的值的变化,来改变checbox的数组值

    2、监听选中checkbox的数组值的变化,当某一项checkbox有变化,判断是否checkbox的数值长度是否和列表数据的长度一致,来改变全选的值。

 

下面来一起看看是怎么实现的吧:

一、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="http://www.mamicode.com/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>


二、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. 是不是觉得超级简单。

vue.js实现checkbox的全选和反选