umy-ui-table 1.2.0 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umy-ui-table",
-  "version": "1.2.0",
+  "version": "1.2.3",
   "description": "一个基于 vue 的 PC 端表格UI库，解决万级数据渲染卡顿问题，过万数据点击全选卡顿，等等问题",
   "author": {
     "name": "foriacus"

package/packages/u-table/index.js

@@ -1,4 +1,12 @@
 import "./revise-el-table-mixins";
 import UTable from "./src/u-table";
 
-export default UTable;
+// 注意：install 必须以对象属性形式挂载。若写成 `UTable.install = function...` 的赋值形式，
+// 打包时会被死代码消除（install 属性静态分析未见读取），导致 Vue.use(UTable) 按需注册静默失败
+const UTableWithInstall = Object.assign({}, UTable, {
+  install(Vue) {
+    Vue.component(UTable.name, UTable);
+  }
+});
+
+export default UTableWithInstall;

package/packages/u-table-column/index.js

@@ -1,8 +1,10 @@
 import UTableColumn from '../table/src/table-column';
 
-/* istanbul ignore next */
-UTableColumn.install = function(Vue) {
-  Vue.component(UTableColumn.name, UTableColumn);
-};
+// 同 u-table：install 需以对象属性形式挂载，赋值形式会被打包器死代码消除
+const UTableColumnWithInstall = Object.assign({}, UTableColumn, {
+  install(Vue) {
+    Vue.component(UTableColumn.name, UTableColumn);
+  }
+});
 
-export default UTableColumn;
+export default UTableColumnWithInstall;

package/packages/ux-grid/src/ux-grid.vue

@@ -4,12 +4,12 @@
     :class="{ uxbeautifyTableClass: beautifyTable }"
     :style="[plTableHeight]"
   >
-    <vxe-table
+    <vxe-grid
       ref="singleTable"
       class="singleTable"
       style="width: 100%"
       :data="data"
-      :columns="columns"
+      :columns="tableColumns"
       :loading="loading"
       :show-footer="summaryMethod ? showSummary : false"
       :max-height="newMaxHeight"
@@ -81,8 +81,7 @@
       <template slot="empty">
         <slot name="empty">{{ emptyText }}</slot>
       </template>
-      <slot />
-    </vxe-table>
+    </vxe-grid>
     <div class="myPagination" v-if="paginationShow" ref="myPagination">
       <el-pagination
         @size-change="handleSizeChange"
@@ -147,17 +146,18 @@ import draggable from "vuedraggable";
 import ElPagination from "../../pagination";
 import ElCheckbox from "../../checkbox";
 import ElButton from "../../button";
-// 直接用 vxe-table@3.22.9 的 VxeTable 作内核（替代原 umy-table 内置的 elx-grid）
-// 注意：不用 VxeGrid，因为 VxeGrid 3.x 不渲染默认插槽，槽位式 ux-table-column 列会全部丢失；
-// VxeTable 原生支持默认插槽列收集（隐藏容器 vxe-table-slots + provide/inject）
-import VxeTable from "vxe-table/lib/table";
+// 直接用 vxe-table@3.22.9 的 VxeGrid 作内核（替代原 umy-table 内置的 elx-grid）
+// 注意：VxeGrid 3.x 不渲染默认插槽（renderTable 仅透传 scopedSlots，不渲染 children），
+// 所以槽位式 <ux-table-column> 不会被其内部表格收集；这里在组件内解析这些槽位列 vnode，
+// 转成 columns 配置后经 :columns 交给 VxeGrid，从而兼容原有的 <ux-table-column> 写法
+import VxeGrid from "vxe-table/lib/grid";
 import uxGridMixin from "../mixins";
 import { parseHeight, isArrayFn } from "../../utils/common";
 
 export default {
   name: "UxGrid",
   mixins: [uxGridMixin],
-  components: { draggable, ElPagination, ElCheckbox, ElButton, VxeTable },
+  components: { draggable, ElPagination, ElCheckbox, ElButton, VxeGrid },
   data() {
     return {
       _times: "", // 弹框定时器
@@ -168,9 +168,15 @@ export default {
       newcurrentPage: "", // 当前页
       newHeight: null, // 表格高度
       newMaxHeight: null, // 表格最大高度
+      slotColumns: [], // 由槽位式 <ux-table-column> 解析出的列配置（无 columns prop 时使用）
     };
   },
     computed: {
+    // VxeGrid 通过 columns prop 接收列：columns prop 优先，否则使用解析出的槽位列配置
+    tableColumns() {
+      if (this.columns && this.columns.length) return this.columns;
+      return this.slotColumns;
+    },
     // span-method 与 vxe 虚拟滚动不兼容（官方 warnLog: scrollErrProp），存在时自动关闭虚拟；
     // merge-cells 与虚拟滚动兼容（vxe 对合并单元格行不做虚拟占位），无需关闭（用户显式传 scrollY/scrollX 且带 enabled 时尊重用户）
     scrollYConfig() {
@@ -210,13 +216,6 @@ export default {
     },
   },
   watch: {
-    columns: {
-      handler(val) {
-        if (val && val.length && this.$refs.singleTable) {
-          this.$refs.singleTable.loadColumn(val);
-        }
-      },
-    },
     data: {
       immediate: true,
       handler(val) {
@@ -247,19 +246,81 @@ export default {
   created() {
     this.newPageSize = this.pageSize;
     this.newcurrentPage = this.currentPage;
+    // 首次渲染前解析槽位式 <ux-table-column>（若有），使 VxeGrid 首帧即带上列
+    this.syncSlotColumns();
+  },
+  updated() {
+    // 处理 <ux-table-column v-if> 动态增减列的场景
+    this.syncSlotColumns();
   },
   mounted() {
     this.$ready = true;
-    // columns prop 是 vxe-grid 独有能力，VxeTable 不提供该 prop，需手动 loadColumn；
-    // 未传 columns 时走槽位式 ux-table-column 收集（VxeTable 原生支持，见 watch staticColumns）
-    if (this.columns && this.columns.length) {
-      this.$nextTick(() => {
-        this.$refs.singleTable &&
-          this.$refs.singleTable.loadColumn(this.columns);
-      });
-    }
+    // VxeGrid 原生支持 columns prop（mounted 自动 loadColumn + watch 响应变化），无需手动 loadColumn
   },
   methods: {
+    // 解析默认插槽里的 <ux-table-column> vnode，转成 VxeGrid 的 columns 配置
+    syncSlotColumns() {
+      // columns prop 优先；仅在未传 columns 时解析槽位列
+      if (this.columns && this.columns.length) return;
+      try {
+        const slotVnodes = (this.$slots.default || []).filter(
+          (vnode) => vnode && vnode.componentOptions
+        );
+        // 用稳定签名比对，避免仅插槽函数引用变化时反复赋值导致渲染循环
+        const sig = this.columnsSig(slotVnodes);
+        if (sig === this._slotColumnsSig) return;
+        this._slotColumnsSig = sig;
+        this.slotColumns = slotVnodes.map((vnode) => this.vnodeToColumn(vnode));
+      } catch (e) {
+        // 解析异常时保持现状，避免渲染循环
+      }
+    },
+    // 把单个 <ux-table-column> vnode 转成列配置（支持嵌套分组列）
+    vnodeToColumn(vnode) {
+      if (!vnode || !vnode.componentOptions) return null;
+      const { propsData = {}, children } = vnode.componentOptions;
+      const scopedSlots = (vnode.data && vnode.data.scopedSlots) || {};
+      const column = Object.assign({}, propsData);
+      const slotKeys = Object.keys(scopedSlots).filter((k) => k.charAt(0) !== "$"); // 过滤 Vue 2 内部标记 $stable 等
+      if (slotKeys.length) {
+        column.slots = {};
+        slotKeys.forEach((key) => {
+          column.slots[key] = scopedSlots[key];
+        });
+      }
+      if (children && children.length) {
+        const nested = [];
+        children.forEach((child) => {
+          const sub = this.vnodeToColumn(child);
+          if (sub) nested.push(sub);
+        });
+        if (nested.length) column.children = nested;
+      }
+      return column;
+    },
+    // 生成槽位列的稳定签名（忽略函数引用差异，按值比较）
+    columnsSig(vnodes) {
+      const fnReplacer = (key, val) =>
+        typeof val === "function" ? "[fn]" : val;
+      const describe = (vnode) => {
+        if (!vnode || !vnode.componentOptions) return "";
+        const { propsData = {}, children } = vnode.componentOptions;
+        const slotKeys = Object.keys(
+          (vnode.data && vnode.data.scopedSlots) || {}
+        ).join(",");
+        let sig = JSON.stringify(propsData, fnReplacer) + "{" + slotKeys + "}";
+        if (children && children.length) {
+          const childSigs = [];
+          children.forEach((child) => {
+            const sub = describe(child);
+            if (sub) childSigs.push(sub);
+          });
+          if (childSigs.length) sig += "[" + childSigs.join(";") + "]";
+        }
+        return sig;
+      };
+      return vnodes.map(describe).join("|");
+    },
     // 自定义字段按钮事件
     handleField(name, index, arr) {
       switch (name) {