wkjp-list-page 1.0.25 → 1.0.26

package/package.json

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

package/src/components/CommonListPage.vue

@@ -120,12 +120,13 @@
           </template>
         </el-table-column>
         <el-table-column
-          v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
+          v-else-if="isBuiltinCellColumn(col)"
           :key="'col-builtin-' + idx + '-' + col.type"
-          v-bind="tableColumnBind(col)"
+          :type="col.type"
+          v-bind="builtinTableColumnBind(col)"
         />
         <el-table-column
-          v-else-if="col.type !== 'slot'"
+          v-else-if="col.type !== 'slot' && !isBuiltinCellColumn(col)"
           :key="'col-' + idx + '-' + (col.prop || col.label)"
           v-bind="tableColumnBind(col)"
         >
@@ -666,66 +667,22 @@ export default {
       if (col.showInColumnConfig === false) return false;
       return true;
     },
+    /** 估算展示宽度：中文等宽字符按 2 计，避免表头所需宽度被低估 */
     textDisplayLength(text) {
-      return String(text == null ? "" : text).length;
-    },
-    /** 折算列宽用的「显示宽度单位」：中文等宽字符 1，ASCII 约 0.6 */
-    textDisplayWidthUnits(text) {
       var s = String(text == null ? "" : text);
-      var units = 0;
+      var len = 0;
       for (var i = 0; i < s.length; i++) {
-        units += s.charCodeAt(i) > 255 ? 1 : 0.6;
+        len += s.charCodeAt(i) > 255 ? 2 : 1;
       }
-      return units;
-    },
-    getColumnLabelText(col) {
-      return (col && (col.label || col.prop || col.slot)) || "";
+      return len;
     },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
       return Number.isFinite(n) && n > 0 ? Math.floor(n) : 20;
     },
-    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 判断） */
+    /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头） */
     getColumnMaxContentLength(col) {
-      var labelLen = this.textDisplayLength(this.getColumnLabelText(col));
+      var labelLen = this.textDisplayLength((col && (col.label || col.prop || col.slot)) || "");
       if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
         return labelLen;
       }
@@ -737,35 +694,55 @@ export default {
       }
       return Math.max(labelLen, maxCell);
     },
+    /** 按字符数折算列最小像素宽（表头 + 单元格共用） */
+    columnWidthFromCharCount(charCount) {
+      var threshold = this.columnOverflowThreshold();
+      var widthChars =
+        charCount > threshold ? threshold : Math.max(charCount, 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 minW = Number(this.columnAutoMinWidth);
+      if (!Number.isFinite(minW) || minW <= 0) minW = 100;
+      return Math.max(minW, Math.ceil(widthChars * charPx + pad));
+    },
     resolveAutoColumnLayout(col) {
       if (!col) return {};
+      var maxLen = this.getColumnMaxContentLength(col);
+      var labelLen = this.textDisplayLength(
+        (col && (col.label || col.prop || col.slot)) || "",
+      );
+      var requiredMinWidth = Math.max(
+        this.columnWidthFromCharCount(maxLen),
+        this.columnWidthFromCharCount(labelLen),
+      );
       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) {
+        var explicitPx = hasWidth ? Number(col.width) : Number(col.minWidth);
+        if (Number.isFinite(explicitPx) && explicitPx > 0 && explicitPx < requiredMinWidth) {
+          if (hasWidth) layout.width = requiredMinWidth;
+          layout.minWidth = requiredMinWidth;
+        } else if (hasMinWidth) {
+          var minPx = Number(col.minWidth);
+          if (Number.isFinite(minPx) && minPx < requiredMinWidth) {
+            layout.minWidth = requiredMinWidth;
+          }
+        }
         if (col.showOverflowTooltip !== undefined && col.showOverflowTooltip !== null) {
           return layout;
         }
-        var maxLenExplicit = this.getColumnMaxContentLength(col);
-        if (maxLenExplicit > this.columnOverflowThreshold()) {
+        if (maxLen > this.columnOverflowThreshold()) {
           layout.showOverflowTooltip = true;
         }
         return layout;
       }
-      var maxLen = this.getColumnMaxContentLength(col);
-      var threshold = this.columnOverflowThreshold();
-      var contentMinWidth = this.getColumnContentMinWidthPx(col);
-      var minW = Number(this.columnAutoMinWidth);
-      if (!Number.isFinite(minW) || minW <= 0) minW = 100;
-      layout.minWidth = Math.max(minW, headerMinWidth, contentMinWidth);
-      if (maxLen > threshold) {
+
+      layout.minWidth = requiredMinWidth;
+      if (maxLen > this.columnOverflowThreshold()) {
         layout.showOverflowTooltip = true;
       } else if (col.showOverflowTooltip === true) {
         layout.showOverflowTooltip = true;
@@ -780,6 +757,15 @@ export default {
       });
       return Object.assign({}, rest, this.resolveAutoColumnLayout(col));
     },
+    /** selection / index / expand：type 须单独绑定，避免与数据列空值模板叠加出 `--` */
+    builtinTableColumnBind(col) {
+      var bind = this.tableColumnBind(col || {});
+      delete bind.type;
+      if (col && col.type === "index" && col.index != null) {
+        bind.index = col.index;
+      }
+      return bind;
+    },
     searchItemKey(item, index) {
       const id = item && (item.slot || item.prop || item.type || "");
       return "search-" + id + "-" + index;
@@ -955,6 +941,7 @@ export default {
       return display === null || display === undefined || display === "";
     },
     resolveCellText(col, row, index) {
+      if (this.isBuiltinCellColumn(col)) return "";
       const raw = typeof col.valueGetter === "function" ? col.valueGetter(row, index) : row[col.prop];
       let display;
       if (typeof col.textFormatter === "function") {
@@ -1744,8 +1731,9 @@ export default {
   color: #606266;
   border: none !important;
   border-radius: 2px;
-  outline: 1px solid #ebeef5;
-  outline-offset: -1px;
+  /* 用 inset 描边代替 outline，避免圆角与 outline-offset 在左上角出现 1px 杂点 */
+  outline: none;
+  box-shadow: inset 0 0 0 1px #ebeef5;
 }
 
 .common-list-page /deep/ .el-table::before,
@@ -1787,6 +1775,10 @@ export default {
   border-bottom: 1px solid #ebeef5 !important;
 }
 
+.common-list-page /deep/ .el-table th.el-table__cell .cell {
+  white-space: nowrap;
+}
+
 .common-list-page /deep/ .el-table td.el-table__cell {
   padding: 10px 12px;
   border-bottom: 1px solid #f0f2f5 !important;