<div class="search-content"> <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全部</Checkbox> <Checkbox-group v-model="checkGroup" @on-change="checkGroupChange"> <Checkbox v-for="(item, index) in list" :label="item.name" :key="item.code"> <span :title="item.name">{{item.name}}</span> </Checkbox> </Checkbox-group> </div>
<script> export default { data() { return { indeterminate: true, checkAll: false, checkGruop: [], list: [{ name: 'aa', code: 1 }, { name: 'bb', code: 2 }, { name: 'cc', code: 3 }]; } }, methods: { //全选按钮 handleCheckAll() { if(this.indeterminate) { this.checkAll = false; } else { this.checkAll = !this.checkAll; } this.indeterminate = false; if(this.checkAll) { this.list.forEach(st => { checkGroup.push(st.code); }); } else { this.checkGroup = []; } }, //选择按钮 checkGroupChange(data) { this.checkGroup = data; if(data.length === this.list.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>