<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><!-- 更多操作 --><el-dropdownstyle="margin-left: 10px":show-timeout="0":placement="`bottom-end`"@command="(c) => dropdownItems.find((v) => v.label == c).clickEvent(c, scope)"><span style="cursor: default">更多<i class="el-icon-arrow-down" /></span><el-dropdown-menuslot="dropdown"style="transition: none;overflow-y: auto;max-height: 400px;margin-top: 5px;"><el-dropdown-itemv-for="(d, i) in dropdownItems":command="d.label":key="i":divided="d.divided"v-if="typeof d.hide === 'function' ? !d.hide(d, scope) : !d.hide":disabled="typeof d.disabled === 'function' ? d.disabled(d, scope) : d.disabled":type="d.type"><i :class="d.icon" v-if="d.icon" />{{ d.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column></el-table></div>
</template>
<script>
export default {name: "moreDropdown",data() {return {dropdownItems: [{hide: true,label: "编辑",clickEvent: (c, scope) => {// this.edit(scope.row);},},{disabled: true,label: "重命名",icon: `el-icon-edit`,clickEvent: (c, scope) => {// this.edit_rename(scope.row);},},{label: "分享",icon: `el-icon-share`,clickEvent: (c, scope) => {console.log(c, scope.row);// this.share(scope.row);},},{label: "下载",type: "success",icon: `el-icon-download`,clickEvent: (c, scope) => {console.log(c, scope.row);// this.download(scope.row);},},{divided: true,label: "删除",icon: `el-icon-delete`,type: "danger",clickEvent: (c, scope) => {// this.del([scope.row]);},},],tableData: [{ name: "姓名1" },{ name: "姓名2" },{ name: "姓名3" },{ name: "姓名4" },{ name: "姓名5" },],};},
};
</script>
<style lang="scss" scoped>
.moreDropDown {// 下拉选择菜单----------------------------------------.el-dropdown-menu__item {&[type="danger"] {color: #f56c6c;&:hover {color: #f56c6c;background-color: #f56c6c22;}}&[type="success"] {color: #67c23a;&:hover {color: #67c23a;background-color: #67c23a22;}}&[type="warning"] {color: #e6a23c;&:hover {color: #e6a23c;background-color: #e6a23c22;}}&[type="info"] {color: #909399;&:hover {color: #909399;background-color: #90939922;}}}
}
</style>

【sgs】自定义组件：简洁版搜索栏筛选框组件（点击筛选条件按钮才出现复杂的、可自定义的筛选组合条件；当页面宽度不足以显示所有操作按钮的时候，自动折叠为“更多操作⌵”上下文关联按钮）。_sorttype' => 'all-CSDN博客文章浏览阅读103次。【代码】【sgs】自定义组件：简洁版搜索栏筛选框组件（点击筛选条件按钮才出现复杂的、可自定义的筛选组合条件；当页面宽度不足以显示所有操作按钮的时候，自动折叠为“更多操作…”上下文关联按钮）。_sorttype' => 'allhttps://blog.csdn.net/qq_37860634/article/details/144657057