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

<template>
  <div :class="$options.name">
    <!-- 更多操作 -->
    <el-dropdown
      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-menu
        slot="dropdown"
        style="transition: none; overflow-y: auto; max-height: 400px; margin-top: 5px"
      >
        <el-dropdown-item
          v-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