vue 全选状态和单选状态

功能需求：点击全选，选中所有复选框，选中之后，如果取消某一个复选框，全选状态自动取消。

1.全选按钮：实现思路，点击全选按钮，遍历所有列表复选框，吧全选按钮的状态（true|false）赋值给每一个列表复选框

代码如下：

<p class="qx">全选<input type="checkbox" @click="selectable" v-model="seall"></p>

<script>
export default {
    data() {
        return {
            seall: false,

        }
    },
}
</script>

点击事件

        selectable() {
            for (let key of this.list) {
                key.sel = !this.seall
            }
        },

2.功能需求二：全选之后如果取消列表某一个子选项全选状态自动取消，思路：给列表的复选框添加监听事件，然后遍历所有复选框，用every 如果都为真就返回true，有一个为假就返回false，在吧这个返回值赋给全选按钮。

代码如下

    watch: {
        list: {
            handler(val) {
                this.seall = val.every(v => v.sel === true);
            },
            deep: true
        }
    },

list是存储数据的数组，，控制复选框的是sel 通过true和false来控制复选框是否启用，结构如下：

list: [{name:"",img:"",price:"",num:"",sel:false}]

代码解释如下：

1. val 是 list 数组当前的值，也就是变化后的值
2. val.every(v => v.sel === true) 表示遍历 val 数组，对于数组中的每一个元素 v，都要判断其 sel 属性是否为 true
3. 如果 val 数组中每一个元素的 sel 属性都为 true，则返回的结果为 true，否则返回的结果为 false
4. 如果 val 中的所有元素的 sel 属性都为 true，则 this.seall 被赋值为 true，否则赋值为 false