Merge pull request #211 from wxfengg/master

refactor(OperationColumn): 重构动态宽度计算的操作列组件

src/components/OperationColumn/index.vue

@@ -1,28 +1,29 @@
 <template>
-  <el-table-column
+  <el-table-column :prop :label :fixed :align :show-overflow-tooltip :width="finalWidth">
-    :label="label"
-    :fixed="fixed"
-    :align="align"
-    :show-overflow-tooltip="showOverflowTooltip"
-    :width="finalWidth"
-  >
     <template #default="{ row }">
-      <div v-auto-width class="operation-buttons">
+      <div v-auto class="operation-button">
-        <slot :row="row"></slot>
+        <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);
-
-// 霈∠<E99C88><E288A0>滢<EFBFBD><E6BBA2>堒捐摨?
 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;
 };
 
-// 霈∠<E99C88><E288A0><EFBFBD>蝏<EFBFBD>捐摨?
+const vAuto = {
+  mounted: () => {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated: () => {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  },
+};
+
 const finalWidth = computed(() => {
-  return props.width || operationWidth.value || props.minWidth;
+  return props.minWidth || maxWidth.value;
 });
-
-// <20>芷<EFBFBD><E88AB7><EFBFBD>摰賢漲<E8B3A2><E6BCB2>誘
-const vAutoWidth = {
-  mounted() {
-    // <20>脲活<E884B2><E6B4BB>蝸<EFBFBD><E89DB8>𧒄<EFBFBD>躰恣蝞𦯀<E89D9E>甈?
-    calculateWidth();
-  },
-  updated() {
-    // <20>唳旿<E594B3>湔鰵<E6B994>園<EFBFBD><E59C92>啗恣蝞𦯀<E89D9E>甈?
-    calculateWidth();
-  },
-};
-
-/**
- * <20>瑕<EFBFBD><E79195>厰僼<E58EB0>圈<EFBFBD><E59C88><EFBFBD>捐撣行䔉<E8A18C>瑕<EFBFBD><E79195>滢<EFBFBD>蝏<EFBFBD><E89D8F><EFBFBD><EFBFBD>憭批捐摨?
- * 瘜冽<E7989C>雿輻鍂<E8BCBB>園<EFBFBD>閬<EFBFBD>蝙<EFBFBD>?`class="operation-buttons"` <20><><EFBFBD>蝑曉<E89D91>鋆寞<E98B86>雿𨀣<E99BBF><F0A880A3>?
- * @returns {number} 餈𥪜<E9A488><F0A5AA9C>滢<EFBFBD>蝏<EFBFBD><E89D8F><EFBFBD><EFBFBD>憭批捐摨?
- */
-const getOperationMaxWidth = () => {
-  const el = document.getElementsByClassName("operation-buttons");
-
-  // <20>𡝗<EFBFBD>雿𦦵<E99BBF><F0A6A6B5><EFBFBD><EFBFBD>憭批捐摨?
-  let maxWidth = 0;
-  let totalWidth: any = 0;
-  Array.prototype.forEach.call(el, (item) => {
-    // <20>瑕<EFBFBD>瘥譍葵item<65><6D>om
-    const buttons = item.querySelectorAll(".el-button");
-    // <20>瑕<EFBFBD>瘥讛<E798A5><E8AE9B>厰僼<E58EB0><E583BC><EFBFBD>餃捐摨?
-    totalWidth = Array.from(buttons).reduce((acc, button: any) => {
-      return acc + button.scrollWidth + 22; // 瘥譍葵<E8AD8D>厰僼<E58EB0><E583BC>捐摨血<E691A8>銝𢠃<E98A9D><F0A2A083>坔捐摨?
-    }, 0);
-
-    // <20>瑕<EFBFBD><E79195><EFBFBD>憭抒<E686AD>摰賢漲
-    if (totalWidth > maxWidth) maxWidth = totalWidth;
-  });
-
-  return maxWidth;
-};
 </script>