wkjp-list-page 1.0.27 → 1.0.28

package/package.json

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

package/src/components/CommonListPage.vue

@@ -128,6 +128,13 @@
             <slot :name="col.slot" :row="scope.row" :scope="scope"></slot>
           </template>
         </el-table-column>
+        <nested-table-column
+          v-else-if="col.children && col.children.length"
+          :key="'col-nested-' + idx + '-' + (col.prop || col.label)"
+          :column="col"
+          :resolve-cell-text="resolveCellText"
+          :column-bind="tableColumnBind"
+        />
         <el-table-column
           v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
           :key="'col-builtin-' + idx + '-' + col.type"
@@ -306,6 +313,7 @@ import FloatingSelect from "./FloatingSelect.vue";
 import FloatingDatePicker from "./FloatingDatePicker.vue";
 import FloatingCascader from "./FloatingCascader.vue";
 import ExportFile from "./ExportFile.vue";
+import NestedTableColumn from "./NestedTableColumn.vue";
 
 export default {
   name: "CommonListPage",
@@ -314,7 +322,8 @@ export default {
     FloatingSelect,
     FloatingDatePicker,
     FloatingCascader,
-    ExportFile
+    ExportFile,
+    NestedTableColumn,
   },
   props: {
     filters: { type: Object, required: true },
@@ -689,6 +698,13 @@ export default {
     /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头） */
     getColumnMaxContentLength(col) {
       var labelLen = this.textDisplayLength((col && (col.label || col.prop || col.slot)) || "");
+      if (col && col.children && col.children.length) {
+        var nestedMax = labelLen;
+        for (var c = 0; c < col.children.length; c++) {
+          nestedMax = Math.max(nestedMax, this.getColumnMaxContentLength(col.children[c]));
+        }
+        return nestedMax;
+      }
       if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
         return labelLen;
       }
@@ -702,6 +718,12 @@ export default {
     },
     resolveAutoColumnLayout(col) {
       if (!col) return {};
+      if (col.children && col.children.length) {
+        var nestedLayout = {};
+        if (col.width != null && col.width !== "") nestedLayout.width = col.width;
+        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) {
@@ -733,7 +755,16 @@ export default {
       return layout;
     },
     tableColumnBind(col) {
-      var omit = ["valueGetter", "textFormatter", "defaultText", "emptyText", "hidden", "_visible", "_configKey"];
+      var omit = [
+        "valueGetter",
+        "textFormatter",
+        "defaultText",
+        "emptyText",
+        "hidden",
+        "_visible",
+        "_configKey",
+        "children",
+      ];
       var rest = {};
       Object.keys(col || {}).forEach(function (k) {
         if (omit.indexOf(k) === -1) rest[k] = col[k];

package/src/components/NestedTableColumn.vue

@@ -1,34 +1,41 @@
 <script>
 /**
- * 递归渲染带 children 的列配置（多级表头）
- * 由 CommonListPage 在检测到 columns[].children 时使用
+ * 递归渲染 el-table-column，支持 columns[].children 多级表头。
  */
 export default {
   name: "NestedTableColumn",
   props: {
     column: { type: Object, required: true },
-    /** (col, row, rowIndex) => 展示文案，与 CommonListPage.resolveCellText 一致 */
-    formatCell: { type: Function, default: null },
-    /** (col) => 传给 el-table-column 的绑定对象 */
+    resolveCellText: { type: Function, default: null },
     columnBind: { type: Function, default: null },
   },
   render(h) {
     const col = this.column;
     const slots = this.$scopedSlots;
-    const bind = this.columnBind;
-    const formatCell = this.formatCell;
+    const resolveCellText = this.resolveCellText;
+    const columnBind = this.columnBind;
 
     if (col.children && col.children.length) {
+      const parentBind =
+        typeof columnBind === "function" ? columnBind(col) || {} : {};
+      const parentProps = {
+        label: parentBind.label != null ? parentBind.label : col.label,
+        align: parentBind.align != null ? parentBind.align : col.align,
+        fixed: parentBind.fixed != null ? parentBind.fixed : col.fixed,
+        width: parentBind.width != null ? parentBind.width : col.width,
+        minWidth: parentBind.minWidth != null ? parentBind.minWidth : col.minWidth,
+        headerAlign: parentBind.headerAlign,
+      };
       return h(
         "el-table-column",
-        { props: { label: col.label, align: col.align } },
+        { props: parentProps },
         col.children.map((child, idx) =>
           h("nested-table-column", {
             key: `${child.prop || child.label || "col"}-${idx}`,
             props: {
               column: child,
-              formatCell,
-              columnBind: bind,
+              resolveCellText,
+              columnBind,
             },
             scopedSlots: slots,
           }),
@@ -36,60 +43,31 @@ export default {
       );
     }
 
-    if (col.type === "slot" && col.slot && slots[col.slot]) {
-      const slotProps = bind ? bind(this.omitSlotMeta(col)) : this.omitSlotMeta(col);
+    const bind = typeof columnBind === "function" ? columnBind(col) || {} : {};
+    const columnProps = Object.assign({}, bind);
+    delete columnProps.children;
+
+    if (col.slot && slots[col.slot]) {
       return h("el-table-column", {
-        props: slotProps,
+        props: columnProps,
         scopedSlots: {
           default: (scope) => slots[col.slot](scope),
         },
       });
     }
 
-    if (col.type === "selection" || col.type === "index" || col.type === "expand") {
-      return h("el-table-column", {
-        props: bind ? bind(col) : col,
-      });
-    }
-
-    const columnProps = bind ? bind(col) : this.leafColumnProps(col);
-
-    if (typeof col.formatter === "function") {
-      columnProps.formatter = col.formatter;
-      return h("el-table-column", { props: columnProps });
-    }
-
     return h("el-table-column", {
       props: columnProps,
       scopedSlots: {
         default: (scope) => {
           const text =
-            typeof formatCell === "function"
-              ? formatCell(col, scope.row, scope.$index)
+            typeof resolveCellText === "function"
+              ? resolveCellText(col, scope.row, scope.$index)
               : scope.row[col.prop];
           return h("span", String(text == null ? "" : text));
         },
       },
     });
   },
-  methods: {
-    omitSlotMeta(col) {
-      const rest = Object.assign({}, col);
-      delete rest.slot;
-      delete rest.type;
-      return rest;
-    },
-    leafColumnProps(col) {
-      return {
-        prop: col.prop,
-        label: col.label,
-        sortable: col.sortable,
-        width: col.width,
-        minWidth: col.minWidth,
-        align: col.align,
-        showOverflowTooltip: col.showOverflowTooltip,
-      };
-    },
-  },
 };
 </script>