wkjp-list-page 1.0.23 → 1.0.25

package/package.json

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

package/src/components/CommonListPage.vue

@@ -669,13 +669,63 @@ export default {
     textDisplayLength(text) {
       return String(text == null ? "" : text).length;
     },
+    /** 折算列宽用的「显示宽度单位」：中文等宽字符 1，ASCII 约 0.6 */
+    textDisplayWidthUnits(text) {
+      var s = String(text == null ? "" : text);
+      var units = 0;
+      for (var i = 0; i < s.length; i++) {
+        units += s.charCodeAt(i) > 255 ? 1 : 0.6;
+      }
+      return units;
+    },
+    getColumnLabelText(col) {
+      return (col && (col.label || col.prop || col.slot)) || "";
+    },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
       return Number.isFinite(n) && n > 0 ? Math.floor(n) : 20;
     },
-    /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头） */
+    getColumnAutoWidthMetrics() {
+      var charPx = Number(this.columnAutoWidthCharPx);
+      var pad = Number(this.columnAutoWidthPadding);
+      if (!Number.isFinite(charPx) || charPx <= 0) charPx = 14;
+      if (!Number.isFinite(pad) || pad < 0) pad = 24;
+      return {
+        charPx: charPx,
+        pad: pad,
+        headerCharPx: charPx * 1.08,
+        headerPad: Math.max(pad, 48)
+      };
+    },
+    estimateColumnWidthPx(units, charPx, paddingPx) {
+      var u = Number(units);
+      if (!Number.isFinite(u) || u <= 0) u = 1;
+      return Math.ceil(u * charPx + paddingPx);
+    },
+    /** 表头文案折算的最小列宽（不参与内容超长封顶） */
+    getColumnHeaderMinWidthPx(col) {
+      var metrics = this.getColumnAutoWidthMetrics();
+      var labelUnits = this.textDisplayWidthUnits(this.getColumnLabelText(col));
+      return this.estimateColumnWidthPx(labelUnits, metrics.headerCharPx, metrics.headerPad);
+    },
+    /** 当前页单元格内容折算的最小列宽（超长按 threshold 封顶，仅影响内容侧） */
+    getColumnContentMinWidthPx(col) {
+      if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) return 0;
+      var metrics = this.getColumnAutoWidthMetrics();
+      var maxCellUnits = 0;
+      var rows = this.innerTableData || [];
+      for (var i = 0; i < rows.length; i++) {
+        var text = this.resolveCellText(col, rows[i], i);
+        maxCellUnits = Math.max(maxCellUnits, this.textDisplayWidthUnits(text));
+      }
+      var threshold = this.columnOverflowThreshold();
+      var contentUnits =
+        maxCellUnits > threshold ? threshold : Math.max(maxCellUnits, 1);
+      return this.estimateColumnWidthPx(contentUnits, metrics.charPx, metrics.pad);
+    },
+    /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头；用于 tooltip 判断） */
     getColumnMaxContentLength(col) {
-      var labelLen = this.textDisplayLength((col && (col.label || col.prop || col.slot)) || "");
+      var labelLen = this.textDisplayLength(this.getColumnLabelText(col));
       if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
         return labelLen;
       }
@@ -691,27 +741,30 @@ export default {
       if (!col) return {};
       var hasWidth = col.width != null && col.width !== "";
       var hasMinWidth = col.minWidth != null && col.minWidth !== "";
+      var headerMinWidth = this.getColumnHeaderMinWidthPx(col);
+      var layout = {};
+      if (hasMinWidth) {
+        var explicitMin = Number(col.minWidth);
+        if (Number.isFinite(explicitMin) && explicitMin < headerMinWidth) {
+          layout.minWidth = headerMinWidth;
+        }
+      }
       if (hasWidth || hasMinWidth) {
         if (col.showOverflowTooltip !== undefined && col.showOverflowTooltip !== null) {
-          return {};
+          return layout;
         }
         var maxLenExplicit = this.getColumnMaxContentLength(col);
-        return maxLenExplicit > this.columnOverflowThreshold()
-          ? { showOverflowTooltip: true }
-          : {};
+        if (maxLenExplicit > this.columnOverflowThreshold()) {
+          layout.showOverflowTooltip = true;
+        }
+        return layout;
       }
       var maxLen = this.getColumnMaxContentLength(col);
       var threshold = this.columnOverflowThreshold();
-      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
-      var charPx = Number(this.columnAutoWidthCharPx);
-      var pad = Number(this.columnAutoWidthPadding);
-      if (!Number.isFinite(charPx) || charPx <= 0) charPx = 14;
-      if (!Number.isFinite(pad) || pad < 0) pad = 24;
+      var contentMinWidth = this.getColumnContentMinWidthPx(col);
       var minW = Number(this.columnAutoMinWidth);
       if (!Number.isFinite(minW) || minW <= 0) minW = 100;
-      var layout = {
-        minWidth: Math.max(minW, Math.ceil(widthChars * charPx + pad))
-      };
+      layout.minWidth = Math.max(minW, headerMinWidth, contentMinWidth);
       if (maxLen > threshold) {
         layout.showOverflowTooltip = true;
       } else if (col.showOverflowTooltip === true) {
@@ -1684,21 +1737,21 @@ export default {
   color: #409eff;
 }
 
-/* ---------- 列表表格（浅表头、细横线；空数据用极细外框，不用 border 网格） ---------- */
+/* ---------- 列表表格（极细外框兜底：空数据区不塌陷、无粗网格线） ---------- */
 .common-list-page /deep/ .el-table {
   overflow: hidden;
   font-size: 12px;
   color: #606266;
-  border: none;
+  border: none !important;
   border-radius: 2px;
   outline: 1px solid #ebeef5;
   outline-offset: -1px;
 }
 
 .common-list-page /deep/ .el-table::before,
-.common-list-page /deep/ .el-table--group::after,
-.common-list-page /deep/ .el-table--border::after {
-  display: none;
+.common-list-page /deep/ .el-table.el-table--border::after,
+.common-list-page /deep/ .el-table.el-table--group::after {
+  display: none !important;
 }
 
 .common-list-page /deep/ .el-table__empty-block {
@@ -1716,7 +1769,8 @@ export default {
 }
 
 .common-list-page /deep/ .el-table__fixed .el-table__body tr td.el-table__cell,
-.common-list-page /deep/ .el-table__fixed-right .el-table__body tr td.el-table__cell {
+.common-list-page /deep/ .el-table__fixed-right .el-table__body tr td.el-table__cell,
+.common-list-page /deep/ .el-table__body tr:last-child td.el-table__cell {
   border-bottom: 1px solid #f0f2f5 !important;
 }
 
@@ -1740,10 +1794,6 @@ export default {
   vertical-align: middle;
 }
 
-.common-list-page /deep/ .el-table__body tr:last-child td.el-table__cell {
-  border-bottom: 1px solid #f0f2f5 !important;
-}
-
 .common-list-page /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
   background: #fafbfc;
 }
@@ -1753,9 +1803,10 @@ export default {
 }
 
 .common-list-page /deep/ .el-table .cell {
+  vertical-align: middle;
   line-height: 1.5;
-  padding-left: 0;
-  padding-right: 0;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
   word-break: break-word;
 }