[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> ```