[toc] ### 1.實現點擊復選框展示對應的操作按鈕 ``` //index.vue computed : { checkList(){ return this.list.filter(item=>item.checked) }, checkedAllStatus(){ return this.checkList.length === this.list.length }, //根據選中的復選框個數控制操作按鈕 checkedCount(){ return this.checkList.length } } <div class="d-flex top-button align-items-center"> <Button type="primary" icon="ios-search" class="mr-2">上傳</Button> <Button icon="ios-search" class="mr-2">新建文件夾</Button> <Button icon="ios-search" v-if="checkedCount" class="mr-2">下載</Button> <Button icon="ios-search" v-if="checkedCount == 1" class="mr-2">分享</Button> <Button icon="ios-search" v-if="checkedCount == 1" class="mr-2">重命名</Button> <Button icon="ios-search" v-if="checkedCount" class="mr-2">刪除</Button> <Input class="ml-auto top-search" search enter-button placeholder="請輸入關鍵詞" /> </div> ``` ### 2. 實現重名名功能 ``` //media-list.vue <DropdownItem @click.native="rename">重命名</DropdownItem> //重命名 rename() { this.value = this.item.name this.$Modal.confirm({ render: (h) => { return h('Input', { props: { value: this.value, autofocus: true, placeholder: '請填寫新名稱...' }, on: { input: (val) => { console.log(val) this.value = val; } } }) }, onOk : ()=>{ this.$emit("on-event",{ type : "rename", index: this.index, value : this.value }) } }) } //index.vue 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; case "rename" : this.list[e.index].name = e.value default: break; } }, ``` ### 3. 點擊操作的重命名按鈕,實現文件重命名功能(對上一個重命名功能優化) ``` //media-list.vue //重命名 rename() { this.$emit("on-event",{ type : "rename", index: this.index }) } //index.vue <Button icon="ios-search" @click="rename(false)" v-if="checkedCount == 1" class="mr-2">重命名</Button> //重命名 rename(index = false){ let item = index !==false ?this.list[index] : this.checkList[0] let value = item.name this.$Modal.confirm({ render: (h) => { return h('Input', { props: { value: value, autofocus: true, placeholder: '請填寫新名稱...' }, on: { input: (val) => { value= val; } } }) }, onOk : ()=>{ item.name = value } }) } 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; case "rename" : this.rename(e.index) default: break; } }, ```