两行代码实现全选功能

 <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" v-model="checkAll" @change=changeCheck()>
                </th>
                <th>用户姓名</th>
                <th>用户性别</th>
                <th>所在城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v,i) in lists" :key="i">
                <th><input type="checkout" v-model="v.check" @change="changeCur()"></th>
                <td>{{v.name}}</td>
                <td>{{v.sex}}</td>
                <td>{{v.city}}</td>
                <td><button disabled="true">删除</button></td>
            </tr>
        </tbody>
    </table>

js

window.onload = function () {
    // 1.全局改变
    // var vm=new Vue
    new Vue({
        el: "#demo",
        data: {
            checkAll: true
        },
        methods: {
            // 3.箭头函数
            getLists: function () {
                var self = this  //2.局部定义,提前改变this指向
                axios({
                    methods: 'get',  //get post put delete option (预请求)
                    url: 'http....'
                }).then(function (res) {
                    console.log(res);
                    let { code, result } = res.data   //es6对象解构
                    if (code == '200') {
                        self.lists = result
                    }

                }).catch(function (error) {
                    console.log(error);
                })
            }
        },
        changeCheck: function () {  //全选
            this.lists.forEach(item => {
                item.check = this.checkAll
            })
        },
        changeCur: function () {
            // 获取选中的个数
            // 一
            // var n = this.lists.filter(function (item) {
            //     return item.check == true
            // })
            // console.log(n.length);
            // if (n.length == this.lists.length) {
            //     this.checkAll = true
            // } else {
            //     this.checkAll = false
            // }
            // 二
            // 获取选中的个数
            // var n = this.lists.filter(item => item.check)
            // n.length == this.lists.length ? this.checkAll = true : this.checkAll = false
            // 三
            // 获取选中的个数
            this.checkAll = this.lists.every(item => item.check)

        },

        mounted: function () {
            this.getLists()
        }
    })
}