[toc] ### 1. 实现全选功能 ``` //index.vue <div class="top-select d-flex align-items-center"> <Checkbox size="small" @on-change="checkAllChange"><span class="ml-2">全选</span></Checkbox> </div> methods : { handleEvent(e){ switch(e.type){ case "delete" : this.list.splice(e.index,1); this.$Message.success("删除成功") break; default : break; } }, //全选与全不选功能 checkAllChange(e){ this.list.map((item,index)=>{ item.checked = e }) } } ``` ### 2. 实现反选 ``` /media-list.vue <Checkbox @on-change="onChange" size="small" class="mb-0 mr-3" :value="item.checked"></Checkbox> methods: { deleteItem() { this.$Modal.confirm({ title: "提示", content: "是否要删除当前选中?", onOk: () => { console.log(this.item, this.index) this.$emit("on-event",{ type : "delete", item : this.item, index : this.index }) } }); }, onChange(e){ this.$emit("on-event",{ type : "checked", index: this.index, value : e }) } } //index.vue computed : { checkList(){ return this.list.filter(item=>item.checked) }, checkedAllStatus(){ return this.checkList.length === this.list.length } }, methods : { handleEvent(e){ console.log(e.value) switch(e.type){ case "delete" : this.list.splice(e.index,1); this.$Message.success("删除成功") break; case "checked": this.list[e.index].checked=e.value break; default : break; } }, checkAllChange(e){ this.list.map((item,index)=>{ item.checked = e }) } } <Checkbox :value="checkedAllStatus" size="small" @on-change="checkAllChange"><span class="ml-2">全选</span></Checkbox> ```