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

sgMoreMenutemplate !-- 更多操作 -- el-dropdown v-ifshowMoreBtn :class$options.name stylemargin-left: 10px :show-timeout0 :split-buttonfalse :placementbottom-end command (command) { let index dropdownItems.findIndex((v) v.label command); let item dropdownItems[index]; item.clickEvent item.clickEvent({ item, index, scope: scope }); } slot v-if$slots.default / template v-else i classel-icon-more v-ifbuttonType icon :titletext / span stylecursor: default v-else {{ text }}i classel-icon-arrow-down //span /template el-dropdown-menu slotdropdown :styledropdownMenuStyle :class${$options.name}-dropdown-menu el-dropdown-item v-for(d, i) in dropdownItems v-if$g.item.show({ item: d, index: i, scope: scope }) :keyi :actived.label dropdownActive :commandd.label :disabled d.label dropdownActive || $g.item.disabled({ item: d, index: i, scope: scope }) :dividedd.divided :typed.type el-badge classnew-badge :typedanger :valued.badge :hidden!d.badge i :class $g.item.getProperty({ property: icon, item: d, index: i, scope: scope }) v-if Boolean( $g.item.getProperty({ property: icon, item: d, index: i, scope: scope }) ) :style $g.item.getProperty({ property: iconStyle, item: d, index: i, scope: scope, }) /{{ d.label }}/el-badge /el-dropdown-item /el-dropdown-menu /el-dropdown /template script export default { name: sgMoreMenu, data() { return { text: 更多, 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]); }, }, */ ], buttonType: text, //text文本默认icon图标 dropdownMenuStyle: { transition: none, overflow-y: auto, max-height: 400px, margin-top: 5px, }, }; }, 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.cF2CP(disabled, this); this.$g.cF2CP(text, this); this.$g.cF2CP(dropdownItems, this); this.$g.cF2CP(dropdownActive, this); this.$g.cF2CP(scope, this); this.$g.cF2CP(buttonType, this); this.$g.cF2CP(dropdownMenuStyle, this); this.removeDivided(); } }, deep: true, //深度监听 immediate: true, //立即执行 }, }, computed: { showMoreBtn() { let arr this.dropdownItems.filter((item, index, ar) this.$g.item.show({ item, index, scope: this.scope }) ); return arr.length 0; }, }, methods: { removeDivided() { let arr this.dropdownItems.filter((item, index, ar) this.$g.item.show({ item, index, scope: this.scope }) ); arr.length 0 delete arr[0].divided; }, }, }; /script style langscss scoped .sgMoreMenu { } /style style langscss .sgMoreMenu-dropdown-menu { .el-badge__content.is-fixed { transform: translate(calc(100% 3px), -3px); } } /styledemotemplate div :class$options.name el-table :datatableData el-table-column typeindex label序号 width60 / !-- 主要列 BEGIN---------------------------------------- -- el-table-column label姓名 template slot-scopescope span{{ scope.row.name }}/span /template /el-table-column !-- 主要列 END---------------------------------------- -- el-table-column label操作 template slot-scopescope el-button sizemini typeprimary click.stopedit(scope.row) dblclick.native.stop 修改/el-button el-button sizemini typedanger click.stopdel(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