wkjp-list-page 1.0.32 → 1.0.34

package/package.json

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

package/src/components/CommonListPage.vue

@@ -451,11 +451,11 @@ export default {
      */
     columnOverflowTooltipChars: { type: Number, default: 20 },
     /** 自动列宽：每字符折算像素（12px 字号下约 12～14） */
-    columnAutoWidthCharPx: { type: Number, default: 14 },
+    columnAutoWidthCharPx: { type: Number, default: 16 },
     /** 自动列宽：单元格左右内边距等额外宽度 */
-    columnAutoWidthPadding: { type: Number, default: 24 },
+    columnAutoWidthPadding: { type: Number, default: 32 },
     /** 自动列宽：未写 width / minWidth 时的默认最小宽度（px） */
-    columnAutoMinWidth: { type: Number, default: 100 }
+    columnAutoMinWidth: { type: Number, default: 120 }
   },
   data() {
     return {
@@ -764,34 +764,64 @@ export default {
         if (col.minWidth != null && col.minWidth !== "") nestedLayout.minWidth = col.minWidth;
         return nestedLayout;
       }
-      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;
+      if (!Number.isFinite(charPx) || charPx <= 0) charPx = 16;
+      if (!Number.isFinite(pad) || pad < 0) pad = 32;
+      
+      // 计算内容宽度（像素）
+      // 如果内容超过阈值，使用阈值计算宽度（显示省略号）
+      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
+      var contentWidthPx = Math.ceil(widthChars * charPx + pad);
+      
+      // 获取用户设置的 minWidth（如果有）
+      var userMinWidth = null;
+      if (col.minWidth != null && col.minWidth !== "") {
+        userMinWidth = Number(col.minWidth);
+        if (!Number.isFinite(userMinWidth) || userMinWidth <= 0) {
+          userMinWidth = null;
+        }
+      }
+      
+      // 获取默认的最小宽度
+      var defaultMinW = Number(this.columnAutoMinWidth);
+      if (!Number.isFinite(defaultMinW) || defaultMinW <= 0) defaultMinW = 120;
+      
+      // 计算最终的最小宽度：max(用户设置的minWidth, 默认minWidth, 内容宽度)
+      var finalMinWidth = Math.max(
+        defaultMinW,
+        contentWidthPx
+      );
+      if (userMinWidth !== null) {
+        finalMinWidth = Math.max(finalMinWidth, userMinWidth);
+      }
+      
+      // 如果用户设置了 width，则使用 width（优先级最高）
+      if (col.width != null && col.width !== "") {
+        var userWidth = Number(col.width);
+        if (Number.isFinite(userWidth) && userWidth > 0) {
+          return {
+            width: userWidth,
+            showOverflowTooltip: maxLen > threshold || col.showOverflowTooltip === true
+          };
+        }
+      }
+      
       var layout = {
-        minWidth: Math.max(minW, Math.ceil(widthChars * charPx + pad))
+        minWidth: finalMinWidth
       };
-      if (maxLen > threshold) {
-        layout.showOverflowTooltip = true;
-      } else if (col.showOverflowTooltip === true) {
+      
+      // 判断是否需要显示 tooltip
+      if (maxLen > threshold || col.showOverflowTooltip === true) {
         layout.showOverflowTooltip = true;
       }
+      
       return layout;
     },
     tableColumnBind(col) {
@@ -1962,7 +1992,9 @@ export default {
   line-height: 1.5;
   padding-left: 10px !important;
   padding-right: 10px !important;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* 操作列：多个文字按钮拉开间距（详情 / 推送 / 删除 等） */

package/src/components/NestedTableColumn.vue

@@ -8,10 +8,12 @@ export default {
     column: { type: Object, required: true },
     resolveCellText: { type: Function, default: null },
     columnBind: { type: Function, default: null },
+    parentScopedSlots: { type: Object, default: null }, // 新增：接收父组件传递的插槽
   },
   render(h) {
     const col = this.column;
-    const slots = this.$scopedSlots;
+    // 优先使用 parentScopedSlots，否则使用 $scopedSlots
+    const slots = this.parentScopedSlots || this.$scopedSlots;
     const resolveCellText = this.resolveCellText;
     const columnBind = this.columnBind;
 
@@ -26,6 +28,7 @@ export default {
         minWidth: parentBind.minWidth != null ? parentBind.minWidth : col.minWidth,
         headerAlign: parentBind.headerAlign,
       };
+      
       return h(
         "el-table-column",
         { props: parentProps },
@@ -36,26 +39,64 @@ export default {
               column: child,
               resolveCellText,
               columnBind,
+              parentScopedSlots: slots, // 关键：继续向下传递插槽
             },
-            scopedSlots: slots,
+            scopedSlots: slots, // 也传递 scopedSlots 作为备选
           }),
         ),
       );
     }
 
     const bind = typeof columnBind === "function" ? columnBind(col) || {} : {};
-    const columnProps = Object.assign({}, bind);
+    
+    // 构建 columnProps
+    const columnProps = Object.assign(
+      {
+        prop: col.prop,
+        label: col.label,
+        slot: col.slot,
+        type: col.type,
+        align: col.align,
+        fixed: col.fixed,
+        width: col.width,
+        minWidth: col.minWidth,
+        sortable: col.sortable,
+        sortMethod: col.sortMethod,
+        sortBy: col.sortBy,
+        sortOrders: col.sortOrders,
+        resizable: col.resizable,
+        formatter: col.formatter,
+        showOverflowTooltip: col.showOverflowTooltip,
+        inlineTemplate: col.inlineTemplate,
+        headerAlign: col.headerAlign,
+        className: col.className,
+        labelClassName: col.labelClassName,
+        selectable: col.selectable,
+        reserveSelection: col.reserveSelection,
+        filters: col.filters,
+        filterMultiple: col.filterMultiple,
+        filterMethod: col.filterMethod,
+        filteredValue: col.filteredValue,
+      },
+      bind,
+    );
+    
     delete columnProps.children;
 
+    // 处理自定义 slot
     if (col.slot && slots[col.slot]) {
       return h("el-table-column", {
         props: columnProps,
         scopedSlots: {
-          default: (scope) => slots[col.slot](scope),
+          default: (scope) => {
+            const slotFn = slots[col.slot];
+            return slotFn(scope);
+          },
         },
       });
     }
 
+    // 处理普通文本渲染
     return h("el-table-column", {
       props: columnProps,
       scopedSlots: {
@@ -70,4 +111,4 @@ export default {
     });
   },
 };
-</script>
+</script>