<template>
    <table class="t1">
                <tr class="tr1">
                    <td>
                        <input type='checkbox' :checked="clsAll.length === pojectClsAll.length" @click='checkedAll()'>全选
                    </td>
                    <td v-for="(cls,index) in pojectClsAll" :key="index">
                        <input type='checkbox' :checked="clsAll.indexOf(cls.cid)>=0" @click='checkedOne(cls.cid)'>{{cls.cname}}
                    </td>
                </tr>
            </table>
</template>

data(){
        return{
            clsAll:['0','1','2','3','4','5','6','7','8','9','10','11','12','13'],
            pojectClsAll:"",
            isCheckedAll: false
        }
    },

methods:{
        checkedOne (id) {
            let idIndex = this.clsAll.indexOf(id)
            if (idIndex >= 0) {
            // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
            this.clsAll.splice(idIndex, 1)
            } else {
            // 选中该checkbox
            this.clsAll.push(id)
            }
            console.log(this.clsAll);
        },
        checkedAll () {
            this.isCheckedAll = !this.isCheckedAll
            if (this.isCheckedAll) {
                // 全选时
                this.clsAll = []
                this.pojectClsAll.forEach(function (fruit) {
                this.clsAll.push(fruit.cid)
                }, this)
            } else {
                this.clsAll = []
            }
            console.log(this.clsAll);
        },
}

效果:

 可以通过console.log()来打印数组

1.多选效果

全选效果 

感谢观看,感觉有帮助的感谢大家点赞收藏,不懂的可以私信,大家一起来解决问题！！