wkjp-list-page 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/CommonListPage.vue

@@ -765,6 +765,56 @@ export default {
       }
       return length;
     },
+    // 判断文本是否需要显示省略号
+    // 中文字符：超过20个字符宽度单位（约10个中文字）
+    // 英文字母/数字：超过40个字符宽度单位（约40个英文字母/数字）
+    shouldShowOverflowTooltip(text) {
+      var str = String(text == null ? "" : text);
+      var fullWidthCount = 0; // 全角字符计数
+      var halfWidthCount = 0; // 半角字符计数
+      
+      for (var i = 0; i < str.length; i++) {
+        var charCode = str.charCodeAt(i);
+        if (
+          (charCode >= 0x4E00 && charCode <= 0x9FFF) || // 中文
+          (charCode >= 0x3000 && charCode <= 0x303F) || // CJK符号和标点
+          (charCode >= 0xFF00 && charCode <= 0xFFEF)    // 全角字符
+        ) {
+          fullWidthCount++;
+        } else {
+          halfWidthCount++;
+        }
+      }
+      
+      // 计算总宽度单位：全角字符*2 + 半角字符*1
+      var totalWidth = fullWidthCount * 2 + halfWidthCount;
+      
+      // 如果包含全角字符，使用20个宽度单位的阈值
+      // 如果只有半角字符，使用40个宽度单位的阈值
+      var threshold = fullWidthCount > 0 ? 20 : 40;
+      
+      return totalWidth > threshold;
+    },
+    // 根据字符类型获取动态阈值
+    getDynamicThreshold(text) {
+      var str = String(text == null ? "" : text);
+      var fullWidthCount = 0; // 全角字符计数
+      
+      for (var i = 0; i < str.length; i++) {
+        var charCode = str.charCodeAt(i);
+        if (
+          (charCode >= 0x4E00 && charCode <= 0x9FFF) || // 中文
+          (charCode >= 0x3000 && charCode <= 0x303F) || // CJK符号和标点
+          (charCode >= 0xFF00 && charCode <= 0xFFEF)    // 全角字符
+        ) {
+          fullWidthCount++;
+        }
+      }
+      
+      // 如果包含全角字符，使用20个宽度单位的阈值
+      // 如果只有半角字符，使用40个宽度单位的阈值
+      return fullWidthCount > 0 ? 20 : 40;
+    },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
       return Number.isFinite(n) && n > 0 ? Math.floor(n) : 20;
@@ -790,6 +840,40 @@ export default {
       }
       return Math.max(labelLen, maxCell);
     },
+    /** 获取列中最长内容的字符串 */
+    getColumnMaxContentText(col) {
+      var labelText = (col && (col.label || col.prop || col.slot)) || "";
+      var maxText = labelText;
+      var maxLength = this.textDisplayLength(labelText);
+      
+      if (col && col.children && col.children.length) {
+        // 对于嵌套列，返回子列中最长的内容
+        for (var c = 0; c < col.children.length; c++) {
+          var childText = this.getColumnMaxContentText(col.children[c]);
+          var childLength = this.textDisplayLength(childText);
+          if (childLength > maxLength) {
+            maxText = childText;
+            maxLength = childLength;
+          }
+        }
+        return maxText;
+      }
+      
+      if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
+        return labelText;
+      }
+      
+      var rows = this.innerTableData || [];
+      for (var i = 0; i < rows.length; i++) {
+        var text = this.resolveCellText(col, rows[i], i);
+        var textLength = this.textDisplayLength(text);
+        if (textLength > maxLength) {
+          maxText = text;
+          maxLength = textLength;
+        }
+      }
+      return maxText;
+    },
     resolveAutoColumnLayout(col) {
       if (!col) return {};
       if (col.children && col.children.length) {
@@ -821,6 +905,8 @@ export default {
           slotLayout.minWidth = defaultMinW;
         }
         // slot 列可以设置 showOverflowTooltip
+        // 对于 slot 列，我们只检查用户是否显式设置了 showOverflowTooltip
+        // 因为 slot 列的内容是自定义的，无法自动判断是否需要省略号
         if (col.showOverflowTooltip === true) {
           slotLayout.showOverflowTooltip = true;
         }
@@ -838,8 +924,14 @@ export default {
       if (!Number.isFinite(pad) || pad < 0) pad = 32;
       
       // 计算内容宽度（像素）
-      // 如果内容超过阈值，使用阈值计算宽度（显示省略号）
-      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
+      // 获取最长内容的字符串来判断应该使用哪个阈值
+      var maxContentText = this.getColumnMaxContentText(col);
+      var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText);
+      
+      // 根据字符类型动态调整阈值
+      // 如果应该显示省略号，使用动态阈值计算宽度
+      var dynamicThreshold = this.getDynamicThreshold(maxContentText);
+      var widthChars = shouldShowTooltip ? dynamicThreshold : Math.max(maxLen, 1);
       var contentWidthPx = Math.ceil(widthChars * charPx + pad);
       
       // 获取用户设置的 minWidth（如果有）
@@ -868,9 +960,12 @@ export default {
       if (col.width != null && col.width !== "") {
         var userWidth = Number(col.width);
         if (Number.isFinite(userWidth) && userWidth > 0) {
+          // 获取最长内容的字符串来判断是否需要显示省略号
+          var maxContentText = this.getColumnMaxContentText(col);
+          var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText) || col.showOverflowTooltip === true;
           return {
             width: userWidth,
-            showOverflowTooltip: maxLen > threshold || col.showOverflowTooltip === true
+            showOverflowTooltip: shouldShowTooltip
           };
         }
       }
@@ -880,7 +975,10 @@ export default {
       };
       
       // 判断是否需要显示 tooltip
-      if (maxLen > threshold || col.showOverflowTooltip === true) {
+      // 获取最长内容的字符串来判断是否需要显示省略号
+      var maxContentText = this.getColumnMaxContentText(col);
+      var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText) || col.showOverflowTooltip === true;
+      if (shouldShowTooltip) {
         layout.showOverflowTooltip = true;
       }