修复btns2的问题

src/App.vue

@@ -47,6 +47,33 @@ const detailTable = reactive({
   },
 });
 
+const tableRows = [
+  {
+    name: "hello whidy",
+    disabled: true,
+    status: 0,
+  },
+  {
+    name: "hello bg",
+    disabled: false,
+    status: 1,
+  },
+  {
+    name: "hello bg",
+    disabled: true,
+    status: 2,
+  },
+  {
+    name: "hello bg",
+    disabled: false,
+    status: 3,
+  },
+];
+
+const handleTest = (val) => {
+  alert(val);
+};
+
 const info = reactive({
   // data in template would couse volar error:
   // [Error - 14:18:50] Request textDocument/formatting failed.
@@ -195,18 +222,67 @@ const { title: cardTitle, icon: cardIcon } = toRefs(card);
     <cw title="bg-table-btns" />
     <cw title="bg-table-pro" />
     <cw title="bg-table" />
-    <!-- <cw title="bg-tabs">
-        <bg-tabs>
-          <div>a</div>
-          <div>b</div>
-          <div>c</div>
-          <template #actions>
-            <div>a action</div>
-            <div>b action</div>
-            <div>c action</div>
-          </template>
-        </bg-tabs>
-      </cw> -->
+    <cw title="bg-tabs">
+      <bg-table
+        ref="bgTable"
+        :headers="[
+          {
+            label: '名称',
+            prop: 'name',
+            minWidth: 240,
+          },
+          {
+            label: '操作',
+            prop: 'action',
+            width: 240,
+            fixed: 'right',
+          },
+        ]"
+        :rows="tableRows"
+        :is-index="true"
+        :stripe="true">
+        <template #action="{ row }">
+          <bg-table-btns2 :limit="2" :table-data="tableRows">
+            <!-- <bg-table-btn
+              v-for="(item, index) in [{ name: 'for-1' }, { name: 'for-2' }]"
+              :key="index"
+              :disabled="row.disabled"
+              @click="handleTest(item.name)">
+              {{ item }}
+            </bg-table-btn> -->
+            <bg-table-btn
+              v-if="row.status === 0"
+              :disabled="row.disabled"
+              class="btn"
+              @click="handleTest('续订')">
+              续订
+            </bg-table-btn>
+            <bg-table-btn
+              v-if="row.status === 2"
+              class="btn"
+              @click="handleTest('再次申请')">
+              再次申请
+            </bg-table-btn>
+            <bg-table-btn class="btn" @click="handleTest('审批详情')">
+              审批详情
+            </bg-table-btn>
+            <bg-table-btn
+              v-if="row.status === 3"
+              class="btn"
+              :disabled="!row.disabled"
+              @click="handleReviewDialog(row, 'submit')">
+              评价
+            </bg-table-btn>
+            <bg-table-btn v-else class="btn" @click="handleTest('评价详情')">
+              评价详情
+            </bg-table-btn>
+            <bg-table-btn class="btn" @click="handleTest('删除')">
+              删除
+            </bg-table-btn>
+          </bg-table-btns2>
+        </template>
+      </bg-table>
+    </cw>
     <cw title="bg-tags">
       <bg-tags
         value="1, 2, 3, 4"

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

 <template>
   <div ref="bgTableBtnsRef" class="bg-table-btns">
     <slot></slot>
-    <el-popover :width="88" :popper-style="bgTablePopover" trigger="hover">
+    <el-popover :popper-style="bgTablePopover" trigger="hover">
       <div class="more-box" :style="state.style">
         <span
           v-for="(item, index) in state.lastChildren"
@@ -65,12 +65,10 @@ const state = reactive({
 watch(
   () => props.tableData,
   () => {
-    setTimeout(() => {
-      nextTick(() => {
-        calcTabs();
-        dealData();
-      });
-    }, 1000);
+    nextTick(() => {
+      calcTabs();
+      dealData();
+    });
   },
   {
     deep: true,
@@ -90,13 +88,13 @@ const calcTabs = () => {
   state.lastChildren = [];
   tabSlots.forEach((e) => {
     //注释和v-if忽略
-    if (e.type.toString() == "Symbol(Comment)") {
+    if (Object.prototype.toString.call(e.children) == "[object String]") {
       //v-for 再次遍历
-    } else if (e.type.toString() == "Symbol(Fragment)") {
+    } else if (Object.prototype.toString.call(e.children) == "[object Array]") {
       let children = e.children || [];
       children.forEach((el) => {
         //注释和v-if忽略
-        if (el.type.toString() == "Symbol(Comment)") {
+        if (Object.prototype.toString.call(e.children) == "[object String]") {
           console.log(el.type);
         } else {
           tempSlots.push(el);
@@ -120,30 +118,6 @@ const calcTabs = () => {
   }
 };
 
-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;
@@ -168,7 +142,8 @@ const dealData = () => {
 };
 
 const bgTablePopover = {
-  width: "88px",
+  width: "auto",
+  maxWidth: "96px",
   padding: "4px 0",
   minWidth: "60px",
 };

vite.config.js

@@ -14,6 +14,9 @@ export default defineConfig({
       "@": resolve_path("src"),
     },
   },
+  build: {
+    sourcemap: true,
+  },
   server: {
     port: 3001,
     proxy: {