iview 全选问题，全选demo案例，直接可以使用的案例

iview 全选问题，全选demo案例，直接可以使用的案例

效果图

全选

全不选

部分被选中

使用方法

checkAll: true,默认为全选，如果需要默认不全选，请设置为checkAll: false,

iview官方api

checkbox

在线vue测试环境

iview

完整demo代码

<template>
<div class="wCen">
    <h2>全选问题</h2>
    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
        <Checkbox v-for="(item,index) in list" :key="index" :label="item.id">
            {{item.id}} - {{item.name}}   
        </Checkbox>
    </CheckboxGroup>
</div>
</template>

<script>
export default {
    computed: {
        length() {
            return this.list.length
        }
    },
    data() {
        return {
            indeterminate: false,
            checkAll: true,
            checkAllGroup: [],
            list: [{
                    id: '10',
                    name: '产品1',
                    productImage: 'http://localhost:3000/_nuxt/assets/images/portal/code_1.png'
                },
                {
                    id: '20',
                    name: '产品2',
                    productImage: 'http://localhost:3000/_nuxt/assets/images/portal/code_1.png'
                },
                {
                    id: '30',
                    name: '产品3',
                    productImage: 'http://localhost:3000/_nuxt/assets/images/portal/code_1.png'
                },
                {
                    id: '40',
                    name: '产品4',
                    productImage: 'http://localhost:3000/_nuxt/assets/images/portal/code_1.png'
                },
                {
                    id: '50',
                    name: '产品5',
                    productImage: 'http://localhost:3000/_nuxt/assets/images/portal/code_1.png'
                },
            ]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            if (this.checkAll) {
                this.checkAllGroup = this.list.map(item=>item.id)
            }
        },
        handleCheckAll() {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.checkAllGroup = this.list.map(item=>item.id)
            } else {
                this.checkAllGroup = [];
            }
        },
        checkAllGroupChange(data) {
            if (data.length === this.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }
    }
}
</script>
<style>
    .wCen{
        width: 1200px;
        margin:50px auto;
    }
</style>

如果觉得有用，请点赞收藏一键三连让更多的同行少走弯路，祝所有同行朋友，程序没bug！