From cc8560a0489b7e8a06fee7cb389f3820995b7192 Mon Sep 17 00:00:00 2001
From: XFeng <wxfengg@qq.com>
Date: Tue, 13 Jan 2026 18:03:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor(OperationColumn):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=AE=BD=E5=BA=A6=E8=AE=A1=E7=AE=97=E7=9A=84?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E5=88=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 用更动态的方法代替静态宽度计算
- 优化计算逻辑代码
---
 src/components/OperationColumn/index.vue | 98 ++++++++++--------------
 1 file changed, 40 insertions(+), 58 deletions(-)

diff --git a/src/components/OperationColumn/index.vue b/src/components/OperationColumn/index.vue
index f9f26eef..f7b9cdef 100644
--- a/src/components/OperationColumn/index.vue
+++ b/src/components/OperationColumn/index.vue
@@ -1,28 +1,29 @@
 <template>
-  <el-table-column
-    :label="label"
-    :fixed="fixed"
-    :align="align"
-    :show-overflow-tooltip="showOverflowTooltip"
-    :width="finalWidth"
-  >
+  <el-table-column :prop :label :fixed :align :show-overflow-tooltip :width="finalWidth">
     <template #default="{ row }">
-      <div v-auto-width class="operation-buttons">
-        <slot :row="row"></slot>
+      <div v-auto class="operation-button">
+        <slot :row="row" />
       </div>
     </template>
   </el-table-column>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 interface Props {
+  /**
+   * 表格数据长度
+   * 用于性能优化，避免多次计算宽度
+   */
   listDataLength: number;
   prop?: string;
   label?: string;
   fixed?: string;
   align?: string;
-  width?: number;
   showOverflowTooltip?: boolean;
+  /**
+   * 最小宽度，优先级高于自动计算宽度，默认80px
+   * @default 80px
+   */
   minWidth?: number;
 }
 
@@ -30,62 +31,43 @@ const props = withDefaults(defineProps<Props>(), {
   label: "操作",
   fixed: "right",
   align: "center",
-  minWidth: 80,
 });
 
 const count = ref(0);
-const operationWidth = ref(props.minWidth || 80);
-
-// 计算操作列宽�?
+const maxWidth = ref(80);
 const calculateWidth = () => {
   count.value++;
-
   if (count.value !== props.listDataLength) return;
-  const maxWidth = getOperationMaxWidth();
-  operationWidth.value = Math.max(maxWidth, props.minWidth);
+
+  let totalWidth = 0;
+  maxWidth.value = 80; // 重置为初始值
+  const els = document.getElementsByClassName("operation-button");
+  Array.from(els).forEach((el) => {
+    const buttons = el.querySelectorAll(".el-button");
+    totalWidth = Array.from(buttons).reduce((prev, button) => {
+      // 14 是按钮之间的距离
+      // 组成：按钮的左边距(Element Plus默认为12px)+按钮的padding(Element Plus默认为2px)
+      return prev + button.scrollWidth + 14;
+    }, 24); // 24 是左右内边距
+
+    maxWidth.value = Math.max(maxWidth.value, totalWidth);
+  });
+
   count.value = 0;
 };
 
-// 计算最终宽�?
+const vAuto = {
+  mounted: () => {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated: () => {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  },
+};
+
 const finalWidth = computed(() => {
-  return props.width || operationWidth.value || props.minWidth;
+  return props.minWidth || maxWidth.value;
 });
-
-// 自适应宽度指令
-const vAutoWidth = {
-  mounted() {
-    // 初次挂载的时候计算一�?
-    calculateWidth();
-  },
-  updated() {
-    // 数据更新时重新计算一�?
-    calculateWidth();
-  },
-};
-
-/**
- * 获取按钮数量和宽带来获取操作组的最大宽�?
- * 注意使用时需要使�?`class="operation-buttons"` 的标签包裹操作按�?
- * @returns {number} 返回操作组的最大宽�?
- */
-const getOperationMaxWidth = () => {
-  const el = document.getElementsByClassName("operation-buttons");
-
-  // 取操作组的最大宽�?
-  let maxWidth = 0;
-  let totalWidth: any = 0;
-  Array.prototype.forEach.call(el, (item) => {
-    // 获取每个item的dom
-    const buttons = item.querySelectorAll(".el-button");
-    // 获取每行按钮的总宽�?
-    totalWidth = Array.from(buttons).reduce((acc, button: any) => {
-      return acc + button.scrollWidth + 22; // 每个按钮的宽度加上预留宽�?
-    }, 0);
-
-    // 获取最大的宽度
-    if (totalWidth > maxWidth) maxWidth = totalWidth;
-  });
-
-  return maxWidth;
-};
 </script>