el-dropdown自定义“更多操作⌵”上下文关联按钮）下拉菜单

<template><div :class="$options.name"><!-- 更多操作 --><el-dropdownstyle="margin-left: 10px":show-timeout="0":split-button="false":placement="`bottom-end`"@command="(command) => {//dropdownActive = command;let index = dropdownItems.findIndex((v) => v.label == command);let item = dropdownItems[index];item.clickEvent && item.clickEvent({ item, index, scope: scope });}"><!-- @click="clickMore" 更多 --><span style="cursor: default">更多<i class="el-icon-arrow-down" /></span><!-- <el-button type="text" icon="el-icon-more" title="更多" /> --><el-dropdown-menuslot="dropdown"style="transition: none; overflow-y: auto; max-height: 400px; margin-top: 5px"><el-dropdown-itemv-for="(d, i) in dropdownItems"v-if="$g.item.show({ item: d, index: i, scope })":key="i":active="d.label == dropdownActive":command="d.label":disabled="d.label == dropdownActive || $g.item.disabled({ item: d, index: i, scope })":divided="d.divided":type="d.type"><i :class="d.icon" v-if="d.icon" />{{ d.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template>
<script>
export default {data() {return {scope: {},dropdownActive: ``,dropdownItems: [{hide: true,label: `编辑`,clickEvent: ({ item, index, scope }) => {this.edit(scope.row);},},{disabled: true,label: `重命名`,icon: `el-icon-edit`,clickEvent: ({ item, index, scope }) => {this.edit_rename(scope.row);},},{show: ({ item, index, scope }) => scope.row.show,label: `分享`,icon: `el-icon-share`,clickEvent: ({ item, index, scope }) => {this.share(scope.row);},},{label: `下载`,type: `success`,icon: `el-icon-download`,clickEvent: ({ item, index, scope }) => {this.download(scope.row);},},{divided: true,label: `删除`,icon: `el-icon-delete`,type: `danger`,clickEvent: ({ item, index, scope }) => {this.del([scope.row]);},},],};},
};
</script>

基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单_dropdown 更多操作 样式-CSDN博客文章浏览阅读520次。【代码】基于element UI el-dropdown打造表格操作列的“更多⌵”上下文关联菜单。_dropdown 更多操作 样式https://blog.csdn.net/qq_37860634/article/details/145044081