wkjp-list-page 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.24",
+  "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,8 +667,14 @@ export default {
       if (col.showInColumnConfig === false) return false;
       return true;
     },
+    /** 估算展示宽度：中文等宽字符按 2 计，避免表头所需宽度被低估 */
     textDisplayLength(text) {
-      return String(text == null ? "" : text).length;
+      var s = String(text == null ? "" : text);
+      var len = 0;
+      for (var i = 0; i < s.length; i++) {
+        len += s.charCodeAt(i) > 255 ? 2 : 1;
+      }
+      return len;
     },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
@@ -687,32 +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 layout = {};
+
       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 {};
+          return layout;
+        }
+        if (maxLen > this.columnOverflowThreshold()) {
+          layout.showOverflowTooltip = true;
         }
-        var maxLenExplicit = this.getColumnMaxContentLength(col);
-        return maxLenExplicit > this.columnOverflowThreshold()
-          ? { 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 minW = Number(this.columnAutoMinWidth);
-      if (!Number.isFinite(minW) || minW <= 0) minW = 100;
-      var layout = {
-        minWidth: Math.max(minW, Math.ceil(widthChars * charPx + pad))
-      };
-      if (maxLen > threshold) {
+
+      layout.minWidth = requiredMinWidth;
+      if (maxLen > this.columnOverflowThreshold()) {
         layout.showOverflowTooltip = true;
       } else if (col.showOverflowTooltip === true) {
         layout.showOverflowTooltip = true;
@@ -727,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;
@@ -902,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") {
@@ -1691,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,
@@ -1734,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;