update：更换按钮组组件

src/bg-ui/bg-table-btns2.vue

+<template>
+  <div class="bg-table-btns" ref="bgTableBtnsRef">
+    <slot></slot>
+    <span
+      class="bg-table-btn more"
+      id="more_btn"
+      v-if="state.children.length > limit"
+      ref="lastEl"
+      @mouseenter="showMoreBtns"
+      @mouseleave="hideMoreBtns">
+      <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
+      <teleport to="body">
+        <div
+          class="more-box"
+          :style="state.style"
+          v-if="state.showMore"
+          @mouseenter="showMoreBtns"
+          @mouseleave="hideMoreBtns">
+          <span
+            v-for="(item, index) in state.lastChildren"
+            :key="'as' + index"
+            @click="action(item.onClick, item.disabled)"
+            :class="item.disabled ? 'disabled' : ''"
+            >{{ item.name }}</span
+          >
+        </div>
+      </teleport>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
+const slots = useSlots();
+
+const props = defineProps({
+  limit: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const bgTableBtnsRef = ref(null);
+const lastEl = ref(null);
+const state = reactive({
+  children: [],
+  index: 0,
+  lastChildren: [],
+  style: {},
+  timer: null,
+  showMore: false,
+});
+
+const action = (event, disable) => {
+  if (disable) {
+    return;
+  }
+  event();
+};
+
+const calcTabs = () => {
+  let tabSlots = slots.default() || [];
+  state.lastChildren = [];
+  if (tabSlots) {
+    tabSlots.forEach((e, idx) => {
+      if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
+        // console.log(e);
+        // console.log(e.props);
+
+        state.lastChildren.push(e.props);
+      }
+    });
+  }
+};
+
+const showMoreBtns = () => {
+  calcTabs();
+  dealData();
+  nextTick(() => {
+    updateSytle();
+    if (state.timer) clearTimeout(state.timer);
+    state.showMore = true;
+  });
+};
+const hideMoreBtns = () => {
+  if (state.timer) clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    state.showMore = false;
+  }, 50);
+};
+const updateSytle = () => {
+  let { top, right } = lastEl.value.getBoundingClientRect();
+  let { width } = window.document.body.getBoundingClientRect();
+  state.style = {
+    top: `${top + 16}px`,
+    right: `${width - right - 16}px`,
+  };
+};
+
+const dealData = () => {
+  let children = bgTableBtnsRef.value.children || [];
+  state.children = children;
+  if (children.length > props.limit) {
+    children[props.limit - 1].style.display = "none";
+    children[props.limit - 1].style.width = "0px";
+    state.index = props.limit - 2;
+    state.lastChildren[0].name = children[props.limit - 1].innerText;
+  }
+  for (let index = 0; index < children.length; index++) {
+    const e = children[index];
+    if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
+      e.style.display = "none";
+      e.style.width = "0px";
+      state.lastChildren[index - props.limit + 1].name = e.innerText;
+    }
+  }
+};
+
+onMounted(() => {
+  calcTabs();
+  dealData();
+});
+</script>
+
+<style scoped>
+.more {
+  position: relative;
+  z-index: 200;
+}
+
+.more-box {
+  position: fixed;
+  padding: 4px 0;
+  background-color: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
+  border-radius: 4px;
+  border: solid 1px #e6e9ef;
+  width: 88px;
+  z-index: 300;
+}
+
+.more-box span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  display: block;
+  padding: 0 16px;
+  margin: 0;
+  color: #202531;
+  line-height: 34px;
+  padding-left: 16px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.more-box span:hover {
+  background-color: #f2f3f7;
+  color: #202531;
+}
+.more-box .disabled {
+  color: #a9b1c7;
+  cursor: not-allowed;
+}
+.more-box .disabled:hover {
+  background-color: #f2f3f7;
+  color: #a9b1c7;
+}
+.more-box span::before {
+  display: none;
+}
+</style>

src/bg-ui/index.js

@@ -35,6 +35,7 @@
  import BgFilterGroup from './bg-filter-group.vue'
  import BgSwitchEle from './bg-switch-ele.vue'
  import BgTableBtns from './bg-table-btns.vue'
+ import BgTableBtns2 from './bg-table-btns2.vue'
  import BgPermission from './bg-permission.vue'
  
 const components = {
@@ -73,6 +74,7 @@ const components = {
   BgSwitchEle,// 基于element-plus封装的switch
   BgTableBtns,// 表格按钮组
   BgPermission,// 菜单选择 
+  BgTableBtns2, // 表格按钮组-新
 };
 
 const install = (Vue) => {

src/bg-ui/index.scss

@@ -804,7 +804,12 @@ a {
   display: inline;
   color: #3759be;
   cursor: pointer;
-
+  &:hover {
+    color:  #738bd2
+  }
+  &:active {
+    color: #2c4798;
+  }
   &.disabled {
     cursor: not-allowed;
     color: #a9b1c7;

src/page/main/config/dict/index.vue

@@ -73,7 +73,19 @@
                     v-model="row.state"></bg-switch>
                 </template>
                 <template v-slot:action="{ row }">
-                  <bg-table-btns :operations="getOperations(row)" />
+                  <!-- 除技术类型之外的字典可以删除 -->
+                  <bg-table-btns2 :limit="3" v-if="nodeClassifyId !== '263758a4-0349-4d49-a816-e8ff8d33a8bb'">
+                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
+                    <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1">删除</bg-table-btn>
+                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
+                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+                  </bg-table-btns2>
+                  <!-- 技术类型字典不可删除 -->
+                  <bg-table-btns2 :limit="3" v-else>
+                    <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
+                    <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
+                    <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+                  </bg-table-btns2>
                 </template>
               </bg-table>
             </div>
@@ -300,51 +312,6 @@ const filterClear = () => {
   changePage(1);
 }; // 重置筛选项
 
-const getOperations = (row) => {
-  if (state.nodeClassifyId == "263758a4-0349-4d49-a816-e8ff8d33a8bb") {
-    return [
-      {
-        name: "编辑",
-        callback: () => edit_row(row),
-        disabled: row.state == 1,
-      },
-      {
-        name: "上移",
-        callback: () => moveRow(row, 1),
-        disabled: !row.canMoveUp,
-      },
-      {
-        name: "下移",
-        callback: () => moveRow(row, 2),
-        disabled: !row.canMoveDown,
-      },
-    ];
-  } else {
-    return [
-      {
-        name: "编辑",
-        callback: () => edit_row(row),
-        disabled: row.state == 1,
-      },
-      {
-        name: "删除",
-        callback: () => delete_row(row),
-        disabled: row.state == 1,
-      },
-      {
-        name: "上移",
-        callback: () => moveRow(row, 1),
-        disabled: !row.canMoveUp,
-      },
-      {
-        name: "下移",
-        callback: () => moveRow(row, 2),
-        disabled: !row.canMoveDown,
-      },
-    ];
-  }
-}; // 表格操作按钮
-
 const getTableRows = () => {
   let params = { ...state.filter };
   params.id = state.nodeId;

src/page/main/develop/account/index.vue

@@ -73,9 +73,9 @@
                   v-model="row.state"></bg-switch>
               </template>
               <template v-slot:action="{ row }">
-                <bg-table-btn class="can_click_text" @click="editAccount(row.id)"> 编辑 </bg-table-btn>
-                <bg-table-btn class="can_click_text" @click="editPsdAccount(row)"> 修改密码 </bg-table-btn>
-                <bg-table-btn class="can_click_text" @click="deleteAccount(row)"> 删除 </bg-table-btn>
+                <bg-table-btn @click="editAccount(row.id)"> 编辑 </bg-table-btn>
+                <bg-table-btn @click="editPsdAccount(row)"> 修改密码 </bg-table-btn>
+                <bg-table-btn @click="deleteAccount(row)"> 删除 </bg-table-btn>
               </template>
             </bg-table>
             <div class="pagination_box">

src/page/main/home-config/banner/index.vue

@@ -27,7 +27,12 @@
                 v-model="row.state"></bg-switch>
             </template>
             <template v-slot:action="{ row }">
-              <bg-table-btns :operations="getOperations(row)" />
+              <bg-table-btns2 :limit="3">
+                <bg-table-btn @click="edit_row(row)" :disabled="row.state == 1">编辑</bg-table-btn>
+                <bg-table-btn @click="delete_row(row)" :disabled="row.state == 1">删除</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+              </bg-table-btns2>
             </template>
           </bg-table>
         </div>
@@ -115,31 +120,6 @@ const getRoleRows = () => {
   });
 }; // 获取列表
 
-const getOperations = (row) => {
-  return [
-    {
-      name: "编辑",
-      callback: () => edit_row(row),
-      disabled: row.state == 1,
-    },
-    {
-      name: "删除",
-      callback: () => delete_row(row),
-      disabled: row.state == 1,
-    },
-    {
-      name: "上移",
-      callback: () => moveRow(row, 1),
-      disabled: !row.canMoveUp,
-    },
-    {
-      name: "下移",
-      callback: () => moveRow(row, 2),
-      disabled: !row.canMoveDown,
-    },
-  ];
-}; // 表格操作按钮
-
 const addBanner = () => {
   router.push("/home-config/banner/add");
 };

src/page/main/home-config/recommend/index.vue

@@ -24,7 +24,12 @@
                 v-model="row.recommend_state"></bg-switch>
             </template>
             <template v-slot:action="{ row }">
-              <bg-table-btns :operations="getOperations(row)" />
+              <bg-table-btns2 :limit="3">
+                <bg-table-btn @click="edit_row(row)" :disabled="row.recommend_state == 1">编辑</bg-table-btn>
+                <bg-table-btn @click="delete_row(row)" :disabled="row.recommend_state == 1">删除</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 1)" :disabled="!row.canMoveUp">上移</bg-table-btn>
+                <bg-table-btn @click="moveRow(row, 2)" :disabled="!row.canMoveDown">下移</bg-table-btn>
+              </bg-table-btns2>
             </template>
           </bg-table>
         </div>
@@ -99,31 +104,6 @@ const getRoleRows = () => {
   });
 }; // 获取列表
 
-const getOperations = (row) => {
-  return [
-    {
-      name: "编辑",
-      callback: () => edit_row(row),
-      disabled: row.recommend_state == 1,
-    },
-    {
-      name: "删除",
-      callback: () => delete_row(row),
-      disabled: row.recommend_state == 1,
-    },
-    {
-      name: "上移",
-      callback: () => moveRow(row, 1),
-      disabled: !row.canMoveUp,
-    },
-    {
-      name: "下移",
-      callback: () => moveRow(row, 2),
-      disabled: !row.canMoveDown,
-    },
-  ];
-}; // 表格操作按钮
-
 const addBanner = () => {
   router.push("/home-config/recommend/add");
 };