【sgMoreMenu】自定义组件：“更多操作⌵”上下文关联按钮）下拉菜单。可用于表格操作列显示不下折叠的更多操作下拉框。

sgMoreMenu

<template><!-- 更多操作 --><el-dropdown:class="$options.name"style="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: scope })":key="i":active="d.label == dropdownActive":command="d.label":disabled="d.label == dropdownActive ||$g.item.disabled({ item: d, index: i, scope: 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>
</template>
<script>
export default {name: `sgMoreMenu`,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]);},}, */],};},props: ["value", "data"],watch: {data: {handler(newValue, oldValue) {// console.log(`深度监听${this.$options.name}：`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = newValue; //JSON.parse(JSON.stringify(newValue));this.$g.convertForm2ComponentParam(`disabled`, this);this.$g.convertForm2ComponentParam(`dropdownItems`, this);this.$g.convertForm2ComponentParam(`dropdownActive`, this);this.$g.convertForm2ComponentParam(`scope`, this);}},deep: true, //深度监听immediate: true, //立即执行},},
};
</script>

demo

<template><div :class="$options.name"><el-table :data="tableData"><el-table-column type="index" label="序号" width="60" /><!-- 主要列 BEGIN---------------------------------------- --><el-table-column label="姓名"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template></el-table-column><!-- 主要列 END---------------------------------------- --><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="primary"@click.stop="edit(scope.row)"@dblclick.native.stop>修改</el-button><el-buttonsize="mini"type="danger"@click.stop="del(scope.row)"@dblclick.native.stop>删除</el-button><!-- 更多操作 --><sgMoreMenu:data="{scope,dropdownItems: [{hide: true,label: `编辑`,clickEvent: ({ item, index, scope }) => {this.edit(scope.row);},},{hide: ({ item, index, scope }) => scope.row.hide,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]);},},],}"/></template></el-table-column></el-table></div>
</template>
<script>
import sgMoreMenu from "@/vue/components/admin/sgMoreMenu";
export default {name: "moreDropdown",components: { sgMoreMenu },data() {return {tableData: [{ name: "姓名1" },{ name: "姓名2", hide: true },{ name: "姓名3", show: true },{ name: "姓名4" },{ name: "姓名5" },],};},
};
</script>

 在此方法基础上扩展：

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