vue 实现element-ui checkbox全选操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 实现element-ui checkbox全选操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
    <div>
    
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    
            <el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i" style="display:block">{{city.name}}</el-checkbox>
                <!-- 加上display:block即代表竖向排列 -->
        </el-checkbox-group>
    
    
    
    </div>
</template>

<script>
export default {
    data() {
        return {
            //全选
            checkAll: false,
            cities: [{
                    "name": "高一",
                    "value": "928"
                },
                {
                    "name": "高二",
                    "value": "929"
                },
                {
                    "name": "高三",
                    "value": "930"
                }
            ], //数据源
            checkedCities: [], //绑定默认选中
            isIndeterminate: false, //设置 indeterminate 状态，只负责样式控制
        };
    },
    methods: {
        // 全选 --- 当绑定值变化时触发的事件
        handleCheckAllChange(val) {
            console.log(val); //val的值是一个布尔值，点中全选为false，取消全选为true
            this.cities.forEach((item) => {
                //当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
                this.checkedCities.push(item.name);
            });
            console.log("🚀 ~ file: checkbox.vue:47 ~ this.cities.forEach ~ checkedCities:", this.checkedCities)
            this.checkedCities = val ? this.checkedCities : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
            this.isIndeterminate = false; //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
        },
        // checkbox选中 --- 当绑定值变化时触发的事件
        handleCheckedCitiesChange(value) {
            console.log(value)
            let checkedCount = value.length; //选中值的长度
            this.checkAll = checkedCount === this.cities.length; //如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length; //同全选按钮事件里面的那个样式控制
        },
    },
};
</script>

<style lang="scss" scoped>

</style>

简单写法文章来源地址https://www.toymoban.com/news/detail-619179.html

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-checkbox v-for="(city,i) in cities" :label="city.name" :key="i" v-model="checkedCities" @change="handleCheckedCitiesChange">{{city.name}}</el-checkbox>
handleCheckAllChange(val) {//val就是v-model绑定的值，即this.checkAll
    if(this.checkAll){
        this.cities.forEach(item=>{
            this.checkedCities.push(item.name)
        })
    }else {
        this.checkedCities = []
    }

},
handleCheckedCitiesChange(value) {//value就是v-model绑定的值，即this.checkedCities
    console.log(this.checkedCities);
    if(this.checkedCities.length == this.cities.length){
        this.checkAll=true
    }else{
        this.checkAll=false
    }
}

到了这里，关于vue 实现element-ui checkbox全选操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！