<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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步