el-table操作列的按钮超过三个时，动态计算，将多余的按钮放入更多el-dropdown-menu中

一下是封装好的操作列组件：OperateBtn

<template>
  <div class="button-group">
    <div
      class="visibleButtons"
      v-for="(button, index) in visibleButtons"
      :key="index"
    >
      <el-button
        link
        type="primary"
        :icon="button.icon"
        @click="button.click"
        v-if="button.isshow && button.text !== '删除'"
      >
        {{ button.text }}
      </el-button>
      <el-popconfirm
        title="确定删除吗?"
        width="200px"
        @confirm="button.click"
        :teleported="false"
        placement="bottom"
        v-if="button.isshow && button.text === '删除'"
      >
        <template #reference>
          <el-button
            link
            type="primary"
            :icon="button.icon"
            @click.stop="button.del"
          >
            {{ button.text }}
          </el-button>
        </template>
      </el-popconfirm>
    </div>

    <el-dropdown v-if="showMore">
      <span class="el-dropdown-link">
        更多
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(button, index) in hiddenButtons"
            :key="index"
          >
            <span v-if="button.text !== '删除'" @click="button.click">
              {{ button.text }}
            </span>
            <el-popconfirm
              title="确定要删除吗？"
              confirmButtonText="确定"
              cancelButtonText="取消"
              @confirm="button.click"
              v-if="button.text === '删除'"
            >
              <template #reference>
                <el-button link @click.stop="button.del">
                  {{ button.text }}
                </el-button>
              </template>
            </el-popconfirm>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from "vue";

interface Item {
  text: string;
  icon: string;
  isshow: boolean;
  click: () => void;
  del?: () => void;			// 这个是可选属性  不给也没事
}

export default defineComponent({
  name: "ButtonGroup",
  props: {
    buttons: {
      type: Array as () => Item[],
      default: () => [],
    },
  },
  setup(props) {
    const isshowButtons = () => {
      return props.buttons?.filter((item: any) => {
        return item.isshow;
      });
    };
    let resultBtn = ref(isshowButtons());
    const visibleButtons = computed(() => {
      if (resultBtn.value.length <= 3) {
        return resultBtn.value;
      } else {
        return resultBtn.value.slice(0, 2);
      }
    });
    const hiddenButtons = computed(() => {
      if (resultBtn.value.length <= 3) {
        return [];
      } else {
        return resultBtn.value.slice(2);
      }
    });
    const showMore = computed(() => {
      return resultBtn.value.length > 3;
    });
    const del = () => {};
    return { visibleButtons, hiddenButtons, showMore, del };
  },
});
</script>

<style lang="scss" scoped>
.button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
</style>

下面是在el-table中的使用:

<el-table>
	<el-table-column align="right">
      <operate-btn
		:key="scope.row.id"			// 子组件必须绑定一个key，不然切换表格分页的时候，表格操作列不会更新
		:buttons="[			// 传给子组件的值，用来渲染按钮，包括：按钮文字、图标、按钮的点击事件、以及按钮的显示与隐藏控制
            {
              text: '编辑',
              icon: 'Edit',
              click: () => handleEdit(row),
              isshow: row.status !== 1 ? true : false,
            },
            {
              text: '订阅详情',
              icon: 'Warning',
              click: () => toAuthDetail(row),
              isshow: row.status === 2 ? true : false,
            },
            {
              text: '重新上架',
              icon: 'RefreshRight',
              click: () => handleRack(row),
              isshow: row.status === 3 ? true : false,
            },
            {
              text: '下架申请',
              icon: 'BottomRight',
              click: () => handleUnShelve(row),
              isshow: row.status === 2 ? true : false,
            },
            {
              text: '上架申请',
              icon: 'TopRight',
              click: () => handleRack(row),
              isshow: row.status === 0 || row.status === 4 ? true : false,
            },
            {
              text: '删除',
              icon: 'Delete',
              click: () => delApi(row.id),
              isshow:
                row.status === 0 || row.status === 3 || row.status === 4
                  ? true
                  : false,
              del: () => del($index),
            },
            // 只有微服务平台和已上架可见
            {
              text: '设置流控规则',
              icon: 'DataAnalysis',
              click: () => openFlowcontrol(row),
              isshow: row.status === 2 && row.source === 1 ? true : false,
            },
            {
              text: '设置超时规则',
              icon: 'Timer',
              click: () => openTimeout(row),
              isshow: row.status === 2 && row.source === 1 ? true : false,
            },
            {
              text: '监控',
              icon: 'Monitor',
              click: () => openMonitor(row),
              isshow: row.status === 2 && row.source === 1 ? true : false,
            },
          ]
		/>
    </el-table-column>
</el-table>