[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; } }, ```