wkjp-list-page 1.0.18 → 1.0.20

package/README.md

@@ -301,6 +301,10 @@ deviceListTransformList(list) {
 | `collapseSearch` | （未传） | 未传时 **`searchOption.length > searchVisibleMax`** 自动折叠；`true` / `false` 强制开/关。 |
 | `searchVisibleMax` | `null` | 折叠时默认展示条数，**未传按 6**；查询项 **超过** 该值时出现「展开查询」；显式传 ≤0 则不折叠。 |
 | `expandSearchText` / `foldSearchText` | 展开查询 / 收起 | 折叠按钮文案。 |
+| `columnOverflowTooltipChars` | `20` | 自动列宽：内容超过该字符数时按该字数定宽并 `show-overflow-tooltip`。 |
+| `columnAutoWidthCharPx` | `14` | 自动列宽每字符折算像素。 |
+| `columnAutoWidthPadding` | `24` | 自动列宽额外内边距像素。 |
+| `columnAutoMinWidth` | `100` | 自动列宽默认最小宽度（px）。 |
 
 ---
 
@@ -325,10 +329,12 @@ deviceListTransformList(list) {
 ## 6. columns 列（常用）
 
 非 `slot` 列会 **透传** 到 `el-table-column`（`prop`、`label`、`width`、`fixed` 等）。  
-内置列类型 **`selection` / `index` / `expand`** 不做自定义单元格包装。
+内置列类型 **`selection` / `index`** 不做自定义单元格包装；**`expand`** 可写 **`type: 'expand'` + `slot`**，用父组件具名插槽渲染展开行内容。
 
 最简写法：**`{ prop: 'name', label: '姓名' }`**，值为 `null` / `undefined` / `''`（以及 `textFormatter` 得到空串）时，默认显示 **`--`**；表格上 **`cell-empty-text`** 可改全局占位；列上 **`emptyText`**（优先）或 **`defaultText`** 可单独改该列。
 
+**列宽（默认）：** 列上 **未写 `width` / `minWidth`** 时，按 **表头文案** 与 **当前页单元格展示内容**（含 `valueGetter` / `textFormatter`）取最长字符数估算 **`minWidth`**，且不低于 **`column-auto-min-width`（默认 100px）**；**超过 20 个字符**（可用 **`column-overflow-tooltip-chars`** 改）时按 20 字折算，并自动 **`show-overflow-tooltip`**。已写 `width` / `minWidth` 的列不自动改宽，但若未写 `showOverflowTooltip` 且内容仍超阈值，会自动开 tooltip。`slot` 列无单元格文本时仅按表头估算。
+
 | 字段 | 说明 |
 |------|------|
 | `type: 'slot'` + `slot` | 自定义列，父组件具名插槽。 |
@@ -336,6 +342,8 @@ deviceListTransformList(list) {
 | `valueGetter` | `(row, index) => any`，取展示用原始值（不填则用 `row[prop]`）。 |
 | `textFormatter` | `(value, row, index) => any`，格式化后若为空仍走空值占位。 |
 | `emptyText` / `defaultText` | 空值时显示文案；**`emptyText` 优先**；都不设则用 **`cell-empty-text`**（默认 `--`）。 |
+| `width` / `minWidth` | 显式指定后不再自动算宽；仍可配合上面的 tooltip 规则。 |
+| `showOverflowTooltip` | 显式 `true` / `false` 时优先于自动规则。 |
 
 ---
 

package/package.json

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

package/src/components/CommonListPage.vue

@@ -109,7 +109,17 @@
     >
       <template v-for="(col, idx) in visibleColumns">
         <el-table-column
-          v-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
+          v-if="col.type === 'expand' && col.slot"
+          :key="'col-expand-' + idx + '-' + col.slot"
+          type="expand"
+          v-bind="tableColumnBind(omitExpandSlotMeta(col))"
+        >
+          <template slot-scope="scope">
+            <slot :name="col.slot" :row="scope.row" :scope="scope"></slot>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
           :key="'col-builtin-' + idx + '-' + col.type"
           v-bind="tableColumnBind(col)"
         />
@@ -361,7 +371,18 @@ export default {
     /** 导出前校验：`(querys) => boolean`，返回 `false` 则中止导出 */
     exportBefore: { type: Function, default: null },
     /** 与列表当前 `total` 比较，超出则提示不导出；不传则不限制 */
-    exportMaxLimit: { type: Number, default: null }
+    exportMaxLimit: { type: Number, default: null },
+    /**
+     * 未在列上写 `width` / `minWidth` 时，按表头与当前页单元格内容估算列宽；
+     * 内容最长超过该字符数则固定按该字数算宽并开启 `showOverflowTooltip`。
+     */
+    columnOverflowTooltipChars: { type: Number, default: 20 },
+    /** 自动列宽：每字符折算像素（12px 字号下约 12～14） */
+    columnAutoWidthCharPx: { type: Number, default: 14 },
+    /** 自动列宽：单元格左右内边距等额外宽度 */
+    columnAutoWidthPadding: { type: Number, default: 24 },
+    /** 自动列宽：未写 width / minWidth 时的默认最小宽度（px） */
+    columnAutoMinWidth: { type: Number, default: 100 }
   },
   data() {
     return {
@@ -592,13 +613,66 @@ export default {
     isConfigPanelColumn(col) {
       return col && col.type !== "selection";
     },
+    textDisplayLength(text) {
+      return String(text == null ? "" : text).length;
+    },
+    columnOverflowThreshold() {
+      var n = Number(this.columnOverflowTooltipChars);
+      return Number.isFinite(n) && n > 0 ? Math.floor(n) : 20;
+    },
+    /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头） */
+    getColumnMaxContentLength(col) {
+      var labelLen = this.textDisplayLength((col && (col.label || col.prop || col.slot)) || "");
+      if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
+        return labelLen;
+      }
+      var maxCell = 0;
+      var rows = this.innerTableData || [];
+      for (var i = 0; i < rows.length; i++) {
+        var text = this.resolveCellText(col, rows[i], i);
+        maxCell = Math.max(maxCell, this.textDisplayLength(text));
+      }
+      return Math.max(labelLen, maxCell);
+    },
+    resolveAutoColumnLayout(col) {
+      if (!col) return {};
+      var hasWidth = col.width != null && col.width !== "";
+      var hasMinWidth = col.minWidth != null && col.minWidth !== "";
+      if (hasWidth || hasMinWidth) {
+        if (col.showOverflowTooltip !== undefined && col.showOverflowTooltip !== null) {
+          return {};
+        }
+        var maxLenExplicit = this.getColumnMaxContentLength(col);
+        return maxLenExplicit > this.columnOverflowThreshold()
+          ? { showOverflowTooltip: true }
+          : {};
+      }
+      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.showOverflowTooltip = true;
+      } else if (col.showOverflowTooltip === true) {
+        layout.showOverflowTooltip = true;
+      }
+      return layout;
+    },
     tableColumnBind(col) {
       var omit = ["valueGetter", "textFormatter", "defaultText", "emptyText", "hidden", "_visible", "_configKey"];
       var rest = {};
       Object.keys(col || {}).forEach(function (k) {
         if (omit.indexOf(k) === -1) rest[k] = col[k];
       });
-      return rest;
+      return Object.assign({}, rest, this.resolveAutoColumnLayout(col));
     },
     searchItemKey(item, index) {
       const id = item && (item.slot || item.prop || item.type || "");
@@ -765,6 +839,11 @@ export default {
       }
       return display;
     },
+    omitExpandSlotMeta(col) {
+      const rest = Object.assign({}, col);
+      delete rest.slot;
+      return rest;
+    },
     omitSlotType(col) {
       const rest = Object.assign({}, col);
       delete rest.type;
@@ -773,7 +852,7 @@ export default {
       delete rest.textFormatter;
       delete rest.defaultText;
       delete rest.emptyText;
-      return rest;
+      return Object.assign({}, rest, this.resolveAutoColumnLayout(col));
     },
     handleSizeChange(size) {
       this.innerPagination.pageSize = size;