npm - ele-scroll-table-vue3 - Versions diffs - 0.1.4 - Mend

ele-scroll-table-vue3 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/ele-scroll-table-vue3.mjs +891 -0
package/dist/ele-scroll-table-vue3.umd.cjs +1 -0
package/dist/style.css +1 -0
package/package.json +39 -0

package/dist/ele-scroll-table-vue3.mjs ADDED Viewed

@@ -0,0 +1,891 @@
+import { resolveComponent as f, openBlock as s, createBlock as $, mergeProps as te, createSlots as he, withCtx as c, createElementBlock as u, Fragment as _, renderList as z, renderSlot as g, createTextVNode as P, toDisplayString as U, createCommentVNode as p, isRef as ge, useTemplateRef as fe, useSlots as Ne, computed as O, ref as Q, watch as re, getCurrentInstance as xe, onMounted as Oe, onBeforeUnmount as Re, createStaticVNode as je, createElementVNode as T, createVNode as L, normalizeClass as ie, unref as Y, toHandlers as Ee, withDirectives as Ve } from "vue";
+import { ElMessage as me } from "element-plus";
+import { useStorage as Fe } from "@vueuse/core";
+import { EPlusResizeDialog as Ue } from "e-plus-dialog-vue3";
+const Me = (a, v = {}) => {
+  const { onStart: w } = v;
+  let o = null;
+  const d = () => {
+    var K;
+    const D = (K = a.value) == null ? void 0 : K.$el;
+    if (!D) return null;
+    const k = D.querySelector(".el-table__body-wrapper .el-scrollbar__wrap") || D.querySelector(".el-table__body-wrapper");
+    if (!k) return null;
+    let C = !1, V = 0, j = 0;
+    const A = (B) => {
+      B.button === 1 && (B.preventDefault(), w == null || w(), C = !0, V = B.clientX, j = k.scrollLeft, D.style.cursor = "grabbing", document.body.style.userSelect = "none");
+    }, E = () => {
+      C && (C = !1, D.style.cursor = "", document.body.style.userSelect = "");
+    }, F = (B) => {
+      if (!C) return;
+      B.preventDefault();
+      const l = B.clientX - V;
+      k.scrollLeft = j - l;
+    }, H = () => {
+      E();
+    }, I = D.querySelector(".el-table__body-wrapper");
+    return I && I.addEventListener("mousedown", A), window.addEventListener("mousemove", F), window.addEventListener("mouseup", H), window.addEventListener("blur", E), window.addEventListener("mouseleave", E), () => {
+      I && I.removeEventListener("mousedown", A), window.removeEventListener("mousemove", F), window.removeEventListener("mouseup", H), window.removeEventListener("blur", E), window.removeEventListener("mouseleave", E);
+    };
+  };
+  return { start: () => {
+    o = d();
+  }, stop: () => {
+    o && o(), o = null;
+  } };
+}, Pe = {
+  __name: "TableColumn",
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+      }
+    },
+    align: {
+      type: String,
+      default: "center"
+    },
+    hideItems: {
+      type: [Array, Object],
+      default: () => ({})
+    }
+  },
+  setup(a) {
+    const v = a, w = (d) => {
+      let b = !1;
+      return ge(v.hideItems) ? v.hideItems.value.includes(d.prop) && (b = !0) : Array.isArray(v.hideItems) && v.hideItems.includes(d.prop) && (b = !0), b;
+    }, o = (d) => d.charAt(0).toUpperCase() + d.slice(1);
+    return (d, b) => {
+      const R = f("TableColumn", !0), D = f("el-table-column");
+      return !w(a.item) && !a.item.hide ? (s(), $(D, te({
+        key: 0,
+        border: "",
+        align: a.align
+      }, a.item), he({
+        header: c(({ column: k, index: C }) => [
+          g(d.$slots, `${a.item.slotName}Header`, {
+            backData: { column: k, index: C }
+          }, () => [
+            P(U(a.item.label), 1)
+          ])
+        ]),
+        default: c((k) => [
+          a.item.merges ? (s(!0), u(_, { key: 0 }, z(a.item.merges, (C) => (s(), $(R, {
+            item: C,
+            hideItems: a.hideItems,
+            align: a.align
+          }, he({ _: 2 }, [
+            z(d.$slots, (V, j) => ({
+              name: j,
+              fn: c((A) => [
+                g(d.$slots, j, te({ ref_for: !0 }, A))
+              ])
+            }))
+          ]), 1032, ["item", "hideItems", "align"]))), 256)) : g(d.$slots, a.item.slotName, {
+            key: 1,
+            backData: k.row,
+            currentItem: a.item
+          }, () => [
+            a.item.prop ? (s(), u(_, { key: 0 }, [
+              P(U(k.row[a.item.prop]), 1)
+            ], 64)) : p("", !0)
+          ])
+        ]),
+        _: 2
+      }, [
+        z(a.item.slotNames, (k) => ({
+          name: k,
+          fn: c((C) => [
+            g(d.$slots, `${a.item.prop}` + o(k), { backData: C })
+          ])
+        }))
+      ]), 1040, ["align"])) : p("", !0);
+    };
+  }
+}, ke = (a, v) => {
+  const w = a.__vccOpts || a;
+  for (const [o, d] of v)
+    w[o] = d;
+  return w;
+}, Ke = { class: "baseTable" }, qe = { class: "handle" }, We = { class: "handleRight" }, Xe = {
+  key: 0,
+  class: "table-search-button-group"
+}, Je = { class: "column-setting-body" }, Ge = /* @__PURE__ */ Object.assign({ name: "BaseTable" }, {
+  __name: "Table",
+  props: {
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    dataList: {
+      // 数据
+      type: Array,
+      default: () => []
+    },
+    tableItem: {
+      // 每列的名字
+      type: Array,
+      default: () => []
+    },
+    tableListener: {
+      type: Object,
+      default: () => ({})
+    },
+    showChoose: {
+      // 是否展示复选框
+      type: Boolean,
+      default: !1
+    },
+    showIndex: {
+      // 是否展示序号
+      type: Boolean,
+      default: !1
+    },
+    pagination: {
+      // 是否显示分页
+      type: Boolean,
+      default: !0
+    },
+    listCount: {
+      //总条数
+      type: Number,
+      default: 0
+    },
+    paginationInfo: {
+      // 分页的页码和偏移
+      type: Object,
+      default: () => ({ pageNum: 1, pageSize: 50 })
+    },
+    elTableConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    showExpand: {
+      type: Boolean,
+      default: !1
+    },
+    align: {
+      type: String,
+      default: "center"
+    },
+    paginationLayout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper"
+    },
+    hideItems: {
+      type: [Array, Object],
+      default: () => ({})
+    },
+    maxHeight: {
+      type: [Number, String]
+    },
+    selectionConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    autoResize: {
+      type: Boolean,
+      default: !0
+    },
+    dragTipScope: {
+      type: String,
+      default: "global"
+    },
+    dragTipStorageKey: {
+      type: String
+    },
+    headerButtons: {
+      type: Array,
+      default: () => ["columnDisplay", "comSearch"]
+    },
+    columnDisplayThreshold: {
+      type: Number,
+      default: 12
+    },
+    enableDblclickCopy: {
+      type: Boolean,
+      default: !0
+    },
+    copyFeedback: {
+      type: Boolean,
+      default: !0
+    },
+    copyLocale: {
+      type: Object,
+      default: () => ({
+        success: "已复制",
+        failed: "复制失败",
+        empty: "无可复制内容"
+      })
+    },
+    persistenceColumn: {
+      type: Boolean,
+      default: !0
+    },
+    persistenceKey: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:paginationInfo", "sortChange", "toggleSearch"],
+  setup(a, { expose: v, emit: w }) {
+    const o = a, d = w, b = fe("elTableRef"), R = fe("headerRef"), D = fe("footerRef"), k = Ne(), C = (e) => {
+      b.value.setScrollTop(0), d("update:paginationInfo", { ...o.paginationInfo, pageNum: e });
+    }, V = (e) => {
+      b.value.setScrollTop(0), d("sortChange", e);
+    }, j = (e) => {
+      b.value.setScrollTop(0), d("update:paginationInfo", {
+        ...o.paginationInfo,
+        pageSize: e
+      });
+    }, A = (e) => e.charAt(0).toUpperCase() + e.slice(1), E = (e, t) => t.some((n) => e.hasOwnProperty(n)), F = O(() => {
+      var n;
+      let e = 0;
+      const t = ((n = D.value) == null ? void 0 : n.clientHeight) ?? 0;
+      return R.value && (e = R.value.clientHeight), o.maxHeight ? o.maxHeight - e - t : o.autoResize ? window.innerHeight - 260 - e - t : void 0;
+    });
+    let H = !1;
+    const I = (e, t) => {
+      for (const n in e)
+        b.value.toggleRowExpansion(e[n], t), e[n].children && I(e[n].children, t);
+    }, K = (...e) => {
+      e ? (H = e[0], I(o.dataList, H)) : (H = !H, I(o.dataList, H));
+    }, B = window.isSmallScreen, l = O(() => B ? "total, prev, pager, next" : o.paginationLayout), S = Q([]), Z = () => {
+      const e = ["handleLeft", "handleRight"], t = Object.keys(k);
+      S.value = t.filter((n) => !e.includes(n));
+    }, ae = (e) => {
+      let t = e;
+      return ge(t) && (t = t.value), Array.isArray(t) ? t.filter(Boolean) : t && typeof t == "object" ? Object.keys(t).filter((n) => t[n]) : [];
+    }, oe = O(() => new Set(ae(o.hideItems))), q = O(() => o.persistenceKey && o.persistenceKey.trim() || null), N = Q([]), W = Q(!1), X = Q(!1), ue = O(() => {
+      var e;
+      return E(k, ["handleLeft", "handleRight"]) || (((e = o.headerButtons) == null ? void 0 : e.length) ?? 0) > 0;
+    }), m = () => {
+      const e = (o.tableItem || []).filter((i) => (i == null ? void 0 : i.prop) && !i.hide), t = e.filter((i) => !oe.value.has(i.prop)).map((i) => i.prop);
+      let n = null;
+      if (o.persistenceColumn && q.value)
+        try {
+          const i = localStorage.getItem(q.value);
+          i && (n = JSON.parse(i));
+        } catch (i) {
+          console.warn("EleScrollTable: Failed to read column settings", i);
+        }
+      if (n && Array.isArray(n)) {
+        const i = new Set(e.map((x) => x.prop)), y = n.filter((x) => i.has(x));
+        N.value = y;
+      } else
+        N.value = t;
+    };
+    re(
+      N,
+      (e) => {
+        if (o.persistenceColumn && q.value)
+          try {
+            localStorage.setItem(q.value, JSON.stringify(e));
+          } catch (t) {
+            console.warn("EleScrollTable: Failed to save column settings", t);
+          }
+      },
+      { deep: !0 }
+    );
+    const r = (e) => oe.value.has(e), be = O(() => {
+      const e = (o.tableItem || []).filter((y) => (y == null ? void 0 : y.prop) && !y.hide).map((y) => y.prop), t = new Set(N.value), n = e.filter((y) => !t.has(y)), i = ae(o.hideItems);
+      return Array.from(/* @__PURE__ */ new Set([...i, ...n]));
+    }), ye = O(() => (o.tableItem || []).filter((t) => (t == null ? void 0 : t.prop) && !t.hide).length > o.columnDisplayThreshold), Se = O(() => (o.tableItem || []).filter((e) => (e == null ? void 0 : e.prop) && !e.hide).map((e) => ({
+      key: e.prop,
+      label: e.label ?? e.prop,
+      disabled: r(e.prop)
+    }))), ce = xe(), we = O(() => {
+      var t;
+      const e = (t = o.dragTipStorageKey) == null ? void 0 : t.trim();
+      return e || (o.dragTipScope === "instance" ? `baseTableDragTipSeen_v2_${(ce == null ? void 0 : ce.uid) ?? "default"}` : "baseTableDragTipSeen_v2");
+    }), de = Fe(we, !1), J = Q(!1), Ce = () => {
+      var n;
+      const e = (n = b.value) == null ? void 0 : n.$el;
+      if (!e) return !1;
+      const t = e.querySelector(".el-table__body-wrapper .el-scrollbar__wrap") || e.querySelector(".el-table__body-wrapper");
+      return t ? t.scrollWidth > t.clientWidth + 2 : !1;
+    }, Ie = () => {
+      !de.value && Ce() && (J.value = !0, setTimeout(() => {
+        J.value && (de.value = !0, J.value = !1);
+      }, 6e3));
+    }, ve = () => {
+      J.value && (J.value = !1), de.value = !0;
+    }, Te = (e, t, n) => {
+      var x, le, G, ne;
+      const i = t == null ? void 0 : t.property;
+      if (i) {
+        const ee = e == null ? void 0 : e[i];
+        return ee == null ? "" : String(ee);
+      }
+      const y = (le = (x = n == null ? void 0 : n.target) == null ? void 0 : x.closest) == null ? void 0 : le.call(x, ".cell");
+      return y ? ((ne = (G = y.innerText) == null ? void 0 : G.trim) == null ? void 0 : ne.call(G)) ?? "" : "";
+    }, Le = async (e) => {
+      var t;
+      if (!e) return !1;
+      try {
+        if ((t = navigator == null ? void 0 : navigator.clipboard) != null && t.writeText)
+          return await navigator.clipboard.writeText(e), !0;
+        const n = document.createElement("textarea");
+        n.value = e, n.setAttribute("readonly", ""), n.style.position = "fixed", n.style.opacity = "0", document.body.appendChild(n), n.select();
+        const i = document.execCommand("copy");
+        return document.body.removeChild(n), i;
+      } catch {
+        return !1;
+      }
+    }, De = async (e, t, n) => {
+      if (!o.enableDblclickCopy) return;
+      const i = Te(e, t, n);
+      if (!i) {
+        o.copyFeedback && me.warning(o.copyLocale.empty);
+        return;
+      }
+      const y = await Le(i);
+      o.copyFeedback && (y ? me.success(o.copyLocale.success) : me.error(o.copyLocale.failed));
+    }, _e = () => {
+      W.value = !W.value, d("toggleSearch", W.value);
+    };
+    re(
+      () => o.tableItem,
+      () => {
+        Z(), m();
+      },
+      {
+        immediate: !0
+      }
+    ), re(
+      () => o.hideItems,
+      () => {
+        m();
+      }
+    );
+    const { start: $e, stop: Be } = Me(
+      b,
+      {
+        onStart: ve
+      }
+    );
+    return Oe(() => {
+      setTimeout(() => {
+        $e(), Ie();
+      }, 100);
+    }), Re(() => {
+      Be();
+    }), v({
+      elTableRef: b,
+      unFoldAll: K
+    }), (e, t) => {
+      const n = f("el-button"), i = f("el-checkbox"), y = f("el-dropdown-item"), x = f("el-checkbox-group"), le = f("el-dropdown-menu"), G = f("el-dropdown"), ne = f("el-transfer"), ee = f("el-tooltip"), pe = f("el-table-column"), ze = f("el-table"), Ae = f("el-pagination");
+      return s(), u("div", Ke, [
+        J.value ? (s(), u("div", {
+          key: 0,
+          class: "drag-tip-overlay",
+          onClick: ve
+        }, [...t[5] || (t[5] = [
+          je('<div class="tip-content" data-v-d2dc3afc><svg class="tip-icon" viewBox="0 0 1024 1024" width="24" height="24" data-v-d2dc3afc><path d="M512 64C335.264 64 192 207.264 192 384v256c0 176.736 143.264 320 320 320s320-143.264 320-320V384c0-176.736-143.264-320-320-320z m0 72c136.992 0 248 111.008 248 248v256c0 136.992-111.008 248-248 248s-248-111.008-248-248V384c0-136.992 111.008-248 248-248z m0 144c-19.872 0-36 16.128-36 36v128c0 19.872 16.128 36 36 36s36-16.128 36-36V316c0-19.872-16.128-36-36-36z" fill="currentColor" data-v-d2dc3afc></path></svg><span class="tip-text" data-v-d2dc3afc>按住鼠标中键可横向拖动</span></div><div class="tip-close" data-v-d2dc3afc><svg viewBox="0 0 1024 1024" width="14" height="14" data-v-d2dc3afc><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" fill="currentColor" data-v-d2dc3afc></path></svg></div>', 2)
+        ])])) : p("", !0),
+        ue.value ? (s(), u("div", {
+          key: 1,
+          class: "header",
+          ref_key: "headerRef",
+          ref: R
+        }, [
+          g(e.$slots, "header", {}, () => [
+            T("div", qe, [
+              g(e.$slots, "handleLeft", {}, void 0, !0)
+            ]),
+            T("div", We, [
+              o.headerButtons.length !== 0 ? (s(), u(_, { key: 0 }, [
+                o.headerButtons.includes("columnDisplay") || o.headerButtons.includes("comSearch") ? (s(), u("div", Xe, [
+                  o.headerButtons.includes("columnDisplay") && !ye.value ? (s(), $(G, {
+                    key: 0,
+                    "max-height": 380,
+                    "hide-on-click": !1,
+                    "popper-class": "columnDisplay"
+                  }, {
+                    dropdown: c(() => [
+                      L(le, null, {
+                        default: c(() => [
+                          L(x, {
+                            modelValue: N.value,
+                            "onUpdate:modelValue": t[0] || (t[0] = (h) => N.value = h)
+                          }, {
+                            default: c(() => [
+                              (s(!0), u(_, null, z(a.tableItem, (h, M) => (s(), $(y, { key: M }, {
+                                default: c(() => [
+                                  h.prop ? (s(), $(i, {
+                                    key: 0,
+                                    disabled: r(h.prop),
+                                    size: "small",
+                                    value: h.prop
+                                  }, {
+                                    default: c(() => [
+                                      P(U(h.label), 1)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["disabled", "value"])) : p("", !0)
+                                ]),
+                                _: 2
+                              }, 1024))), 128))
+                            ]),
+                            _: 1
+                          }, 8, ["modelValue"])
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    default: c(() => [
+                      L(n, {
+                        class: ie([
+                          "table-search-button-item",
+                          o.headerButtons.includes("columnDisplay") ? "right-border" : ""
+                        ]),
+                        plain: ""
+                      }, {
+                        default: c(() => [...t[6] || (t[6] = [
+                          P(" 列设置 ", -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["class"])
+                    ]),
+                    _: 1
+                  })) : p("", !0),
+                  o.headerButtons.includes("columnDisplay") && ye.value ? (s(), u(_, { key: 1 }, [
+                    L(n, {
+                      class: ie([
+                        "table-search-button-item",
+                        o.headerButtons.includes("comSearch") ? "right-border" : ""
+                      ]),
+                      plain: "",
+                      onClick: t[1] || (t[1] = (h) => X.value = !0)
+                    }, {
+                      default: c(() => [...t[7] || (t[7] = [
+                        P(" 列设置 ", -1)
+                      ])]),
+                      _: 1
+                    }, 8, ["class"]),
+                    L(Y(Ue), {
+                      modelValue: X.value,
+                      "onUpdate:modelValue": t[4] || (t[4] = (h) => X.value = h),
+                      title: "列设置",
+                      resizable: !0,
+                      "min-width": 560,
+                      "min-height": 380,
+                      class: "column-setting-dialog"
+                    }, {
+                      footer: c(() => [
+                        L(n, {
+                          onClick: t[3] || (t[3] = (h) => X.value = !1)
+                        }, {
+                          default: c(() => [...t[8] || (t[8] = [
+                            P("关闭", -1)
+                          ])]),
+                          _: 1
+                        })
+                      ]),
+                      default: c(() => [
+                        T("div", Je, [
+                          L(ne, {
+                            modelValue: N.value,
+                            "onUpdate:modelValue": t[2] || (t[2] = (h) => N.value = h),
+                            filterable: "",
+                            data: Se.value,
+                            titles: ["隐藏列", "显示列"]
+                          }, null, 8, ["modelValue", "data"])
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ], 64)) : p("", !0),
+                  o.headerButtons.includes("comSearch") ? (s(), $(ee, {
+                    key: 2,
+                    content: W.value ? "关闭搜索" : "展开搜索",
+                    placement: "top"
+                  }, {
+                    default: c(() => [
+                      L(n, {
+                        class: "table-search-button-item",
+                        onClick: _e,
+                        plain: ""
+                      }, {
+                        default: c(() => [...t[9] || (t[9] = [
+                          P(" 搜索 ", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["content"])) : p("", !0)
+                ])) : p("", !0)
+              ], 64)) : p("", !0),
+              g(e.$slots, "handleRight", {}, void 0, !0)
+            ])
+          ], !0)
+        ], 512)) : p("", !0),
+        L(ze, te({
+          class: "elTable",
+          ref_key: "elTableRef",
+          ref: b,
+          data: a.dataList,
+          border: a.border,
+          maxHeight: F.value ? F.value > 300 ? F.value : 300 : void 0,
+          "show-overflow-tooltip": !0,
+          style: { width: "100%" },
+          stripe: "",
+          onSortChange: V,
+          onRowDblclick: De
+        }, Ee(a.tableListener), a.elTableConfig), {
+          default: c(() => [
+            a.showExpand ? (s(), $(pe, {
+              key: 0,
+              type: "expand"
+            }, {
+              default: c(({ row: h }) => [
+                g(e.$slots, "expand", { backData: h }, void 0, !0)
+              ]),
+              _: 3
+            })) : p("", !0),
+            a.showChoose ? (s(), $(pe, te({
+              key: 1,
+              type: "selection",
+              width: "55",
+              align: a.align
+            }, a.selectionConfig), null, 16, ["align"])) : p("", !0),
+            a.showIndex ? (s(), $(pe, {
+              key: 2,
+              width: "55",
+              align: a.align,
+              label: "序号",
+              type: "index"
+            }, null, 8, ["align"])) : p("", !0),
+            (s(!0), u(_, null, z(a.tableItem, (h) => (s(), $(Pe, {
+              key: h.prop,
+              item: h,
+              align: a.align,
+              hideItems: be.value
+            }, he({ _: 2 }, [
+              z(S.value, (M) => ({
+                name: M,
+                fn: c(({ backData: se, currentItem: He }) => [
+                  g(e.$slots, M, {
+                    backData: se,
+                    row: se,
+                    currentItem: He
+                  }, void 0, !0)
+                ])
+              })),
+              z(h.slotNames, (M) => ({
+                name: M,
+                fn: c((se) => [
+                  g(e.$slots, `${h.prop}` + A(M), { backData: se }, void 0, !0)
+                ])
+              }))
+            ]), 1032, ["item", "align", "hideItems"]))), 128))
+          ]),
+          _: 3
+        }, 16, ["data", "border", "maxHeight"]),
+        a.pagination ? (s(), u("div", {
+          key: 2,
+          class: ie(["footer lmw-pagination-footer", {
+            isSmall: Y(B)
+          }]),
+          ref_key: "footerRef",
+          ref: D
+        }, [
+          g(e.$slots, "footer", {}, () => [
+            L(Ae, {
+              onSizeChange: j,
+              onCurrentChange: C,
+              "current-page": a.paginationInfo.pageNum,
+              "page-size": a.paginationInfo.pageSize,
+              "page-sizes": [20, 50, 100, 200, 300],
+              layout: l.value,
+              total: a.listCount,
+              "pager-count": Y(B) ? 5 : 7,
+              background: "",
+              "hide-on-single-page": ""
+            }, null, 8, ["current-page", "page-size", "layout", "total", "pager-count"])
+          ], !0)
+        ], 2)) : p("", !0)
+      ]);
+    };
+  }
+}), Qe = /* @__PURE__ */ ke(Ge, [["__scopeId", "data-v-d2dc3afc"]]), Ye = { class: "mobileContent" }, Ze = {
+  key: 0,
+  class: "mb12 header"
+}, et = { class: "headerContent" }, tt = { class: "handleRight" }, at = { class: "handleRight" }, ot = {
+  key: 1,
+  class: "dataList"
+}, lt = { class: "data-card overlayColor" }, nt = {
+  key: 0,
+  class: "card-header"
+}, st = { class: "order-number" }, rt = { class: "label" }, it = ["onClick"], ut = { class: "info-list" }, ct = { class: "info-row" }, dt = { class: "label" }, pt = { class: "value" }, ft = { class: "card-footer mobileFooter" }, mt = {
+  key: 3,
+  class: "footer lmw-pagination-footer"
+}, ht = { class: "mr2" }, gt = /* @__PURE__ */ Object.assign({ name: "BaseMobileTable" }, {
+  __name: "MoblieTable",
+  props: {
+    dataList: {
+      // 数据
+      type: Array,
+      default: () => []
+    },
+    tableItem: {
+      // 每列的名字
+      type: Array,
+      default: () => []
+    },
+    tableListener: {
+      type: Object,
+      default: () => ({})
+    },
+    showChoose: {
+      // 是否展示复选框
+      type: Boolean,
+      default: !1
+    },
+    pagination: {
+      // 是否显示分页
+      type: Boolean,
+      default: !0
+    },
+    listCount: {
+      //总条数
+      type: Number,
+      default: 0
+    },
+    paginationInfo: {
+      // 分页的页码和偏移
+      type: Object,
+      default: () => ({ pageNum: 1, pageSize: 10 })
+    },
+    paginationLayout: {
+      type: String,
+      default: "prev, pager, next"
+    },
+    hideItems: {
+      type: [Array, Object],
+      default: () => ({})
+    },
+    showBacktop: {
+      type: Boolean,
+      default: !0
+    },
+    visibilityHeight: {
+      type: Number,
+      default: 100
+    },
+    selectionConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    tableLayout: {
+      type: Object,
+      default: () => ({
+        xl: 6,
+        lg: 8,
+        md: 12,
+        sm: 12,
+        xs: 24
+      })
+    }
+  },
+  emits: [
+    "cardHeaderClick",
+    "selectionChange",
+    "update:paginationInfo"
+  ],
+  setup(a, { expose: v, emit: w }) {
+    const o = a, d = w;
+    let b = [], R = [], D = [];
+    const k = () => {
+      o.tableItem.forEach((l) => {
+        l.mobileSlot === "header" && b.push({
+          ...l,
+          slotName: l.slotName ?? l.prop + "Header"
+        }), (l.mobileSlot === "footer" || l.prop === "todo") && D.push({
+          ...l,
+          slotName: l.slotName ?? l.prop + "Slot"
+        }), l.mobileSlot || R.push({
+          ...l,
+          slotName: l.slotName ?? l.prop + "Content"
+        });
+      });
+    };
+    re(
+      () => o.tableItem,
+      () => {
+        k();
+      },
+      {
+        immediate: !0
+      }
+    );
+    const C = () => {
+      const l = document.querySelector(".el-main");
+      l == null || l.scrollTo(0, 0);
+    }, V = (l) => {
+      l.querySelectorAll("*").length <= 1 ? l.setAttribute("hiden", "") : l.removeAttribute("hiden");
+    }, j = {
+      mounted: (l) => {
+        V(l);
+      },
+      updated: (l) => {
+        V(l);
+      }
+    }, A = (l) => {
+      let S = !1;
+      return ge(o.hideItems) ? o.hideItems.value.includes(l.prop) && (S = !0) : Array.isArray(o.hideItems) && o.hideItems.includes(l.prop) && (S = !0), S;
+    }, E = (l) => {
+      d("cardHeaderClick", l);
+    }, F = () => {
+      d("selectionChange", I.value);
+    }, H = (l, S) => S.some((Z) => l.hasOwnProperty(Z)), I = Q([]), K = O(() => I.value.length === o.dataList.length);
+    return v({
+      checkAll: () => {
+        K.value ? I.value = [] : I.value = o.dataList;
+      }
+    }), (l, S) => {
+      const Z = f("el-scrollbar"), ae = f("el-checkbox"), oe = f("el-col"), q = f("el-row"), N = f("el-checkbox-group"), W = f("el-empty"), X = f("el-pagination"), ue = f("el-backtop");
+      return s(), u("div", Ye, [
+        H(l.$slots, ["handleLeft", "handleRight"]) ? (s(), u("div", Ze, [
+          L(Z, null, {
+            default: c(() => [
+              T("div", et, [
+                g(l.$slots, "header", {}, () => [
+                  T("div", tt, [
+                    g(l.$slots, "handleLeft", {}, void 0, !0)
+                  ]),
+                  T("div", at, [
+                    g(l.$slots, "handleRight", {}, void 0, !0)
+                  ])
+                ], !0)
+              ])
+            ]),
+            _: 3
+          })
+        ])) : p("", !0),
+        a.dataList.length !== 0 ? (s(), u("div", ot, [
+          L(N, {
+            modelValue: I.value,
+            "onUpdate:modelValue": S[0] || (S[0] = (m) => I.value = m),
+            onChange: F
+          }, {
+            default: c(() => [
+              L(q, { gutter: 12 }, {
+                default: c(() => [
+                  (s(!0), u(_, null, z(a.dataList, (m) => (s(), $(oe, te({ ref_for: !0 }, a.tableLayout, { class: "mb12" }), {
+                    default: c(() => [
+                      T("div", lt, [
+                        (s(!0), u(_, null, z(Y(b), (r) => (s(), u(_, null, [
+                          !A(r) && !r.hide ? (s(), u("div", nt, [
+                            T("div", st, [
+                              g(l.$slots, r.slotName + "Header", {
+                                backData: Object.assign(m, { column: r })
+                              }, () => [
+                                T("div", rt, U(r.label) + "：", 1)
+                              ], !0),
+                              g(l.$slots, r.slotName, {
+                                backData: Object.assign(m, { column: r })
+                              }, () => [
+                                T("div", {
+                                  class: "value",
+                                  onClick: (be) => E(m)
+                                }, U(m[r.prop]), 9, it)
+                              ], !0)
+                            ]),
+                            a.showChoose ? (s(), $(ae, {
+                              key: 0,
+                              class: "checkSize",
+                              value: m,
+                              disabled: a.selectionConfig.selectable && !a.selectionConfig.selectable(m)
+                            }, null, 8, ["value", "disabled"])) : p("", !0)
+                          ])) : p("", !0)
+                        ], 64))), 256)),
+                        T("div", ut, [
+                          T("div", ct, [
+                            (s(!0), u(_, null, z(Y(R), (r) => (s(), u(_, {
+                              key: r.prop
+                            }, [
+                              !A(r) && !r.hide ? (s(), u("div", {
+                                key: 0,
+                                class: ie(["info-item", {
+                                  "full-width": r.width >= 160 || r.minWidth >= 160
+                                }])
+                              }, [
+                                r.prop !== "todo" ? (s(), u(_, { key: 0 }, [
+                                  g(l.$slots, r.slotName + "Header", {
+                                    backData: Object.assign(m, { column: r })
+                                  }, () => [
+                                    T("span", dt, U(r.label) + "： ", 1)
+                                  ], !0),
+                                  g(l.$slots, r.slotName, {
+                                    backData: Object.assign(m, { column: r })
+                                  }, () => [
+                                    T("span", pt, U(m[r.prop]), 1)
+                                  ], !0)
+                                ], 64)) : p("", !0)
+                              ], 2)) : p("", !0)
+                            ], 64))), 128))
+                          ])
+                        ]),
+                        Ve((s(), u("div", ft, [
+                          (s(!0), u(_, null, z(Y(D), (r) => (s(), u(_, null, [
+                            A(r) ? p("", !0) : g(l.$slots, r.slotName, {
+                              key: 0,
+                              backData: Object.assign(m, { column: r })
+                            }, void 0, !0)
+                          ], 64))), 256))
+                        ])), [
+                          [j]
+                        ])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1040))), 256))
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["modelValue"])
+        ])) : (s(), $(W, {
+          key: 2,
+          class: "overlayColor",
+          description: "暂无数据"
+        })),
+        a.pagination && a.listCount > a.paginationInfo.pageSize ? (s(), u("div", mt, [
+          T("span", ht, U(a.listCount) + "条 ", 1),
+          L(X, {
+            onSizeChange: C,
+            onCurrentChange: C,
+            "current-page": a.paginationInfo.pageNum,
+            "onUpdate:currentPage": S[1] || (S[1] = (m) => a.paginationInfo.pageNum = m),
+            "page-size": a.paginationInfo.pageSize,
+            "onUpdate:pageSize": S[2] || (S[2] = (m) => a.paginationInfo.pageSize = m),
+            layout: a.paginationLayout,
+            total: a.listCount,
+            "pager-count": 5,
+            background: "",
+            "hide-on-single-page": ""
+          }, null, 8, ["current-page", "page-size", "layout", "total"])
+        ])) : p("", !0),
+        L(ue, {
+          target: ".el-main",
+          right: 10,
+          bottom: 100,
+          "visibility-height": a.visibilityHeight
+        }, null, 8, ["visibility-height"])
+      ]);
+    };
+  }
+}), bt = /* @__PURE__ */ ke(gt, [["__scopeId", "data-v-4277cdf1"]]), yt = [Qe, bt], vt = (a) => {
+  yt.forEach((v) => {
+    const w = v.name || v.__name;
+    w && a.component(w, v);
+  });
+}, It = { install: vt };
+export {
+  bt as MoblieTable,
+  Qe as Table,
+  It as default
+};

package/dist/ele-scroll-table-vue3.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .resize-handle{-webkit-user-select:none;user-select:none}.custom-dialog-actions{display:flex;align-items:center}.custom-dialog-header{display:flex;justify-content:space-between;align-items:center;width:100%}.custom-dialog-actions .custom-header-btn{position:static;margin-left:10px;font-size:16px;width:20px;height:20px;line-height:1;border:none;background:transparent;cursor:pointer;padding:0;color:var(--el-color-info)}.custom-dialog-actions .custom-header-btn:hover{color:var(--el-color-primary)}.custom-dialog-actions .custom-header-btn svg{width:100%;height:100%;vertical-align:middle}.e-plus-resize-dialog{display:flex;flex-direction:column;max-height:85vh;overflow:hidden;margin-bottom:0}.e-plus-resize-dialog.is-fullscreen{max-height:100vh;height:100vh!important;margin:0!important}.e-plus-resize-dialog .el-dialog__header,.e-plus-resize-dialog .el-dialog__footer{flex-shrink:0}.e-plus-resize-dialog .el-dialog__body{flex:1;overflow:auto;min-height:0}.e-plus-resize-dialog.is-modal-hidden{pointer-events:auto!important}.drag-tip-overlay[data-v-d2dc3afc]{position:absolute;top:20px;right:20px;z-index:2000;display:flex;align-items:center;gap:16px;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 24px #0000004d;border-radius:30px;padding:12px 20px;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none}.drag-tip-overlay[data-v-d2dc3afc]:hover{background:#000000f2;border-color:#fff6;transform:scale(1.05)}.tip-content[data-v-d2dc3afc]{display:flex;align-items:center;gap:12px;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px}.tip-icon[data-v-d2dc3afc]{color:var(--el-color-primary);animation:scrollIconAnim-d2dc3afc 2s ease-in-out infinite;display:block}.tip-close[data-v-d2dc3afc]{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fff3;color:#ddd;transition:all .2s}.tip-close[data-v-d2dc3afc]:hover{background:#fff6;color:#fff}@keyframes scrollIconAnim-d2dc3afc{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}.header[data-v-d2dc3afc]{position:relative;overflow-x:auto;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:100%;background-color:var(--ba-bg-color-overlay);border:1px solid var(--ba-border-color);border-bottom:none;padding:13px 15px;font-size:14px}.header .table-header-operate-text[data-v-d2dc3afc]{margin-left:6px}.handleRight[data-v-d2dc3afc]{display:flex;align-items:center;gap:8px}.table-search-button-group[data-v-d2dc3afc]{display:flex;align-items:center}.table-search-button-item[data-v-d2dc3afc]{height:30px;padding:0 12px}.right-border[data-v-d2dc3afc]{border-top-right-radius:0;border-bottom-right-radius:0;border-right:1px solid var(--el-border-color)}.footer[data-v-d2dc3afc]{background-color:var(--ba-bg-color-overlay)}.footer[data-v-d2dc3afc] .el-pagination{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:flex-end;box-sizing:border-box;padding:13px 15px}.isSmall[data-v-d2dc3afc] .btn-prev{margin:0 2px}.isSmall[data-v-d2dc3afc] .btn-next{margin:0 0 0 2px}.isSmall[data-v-d2dc3afc] .el-pager li{margin:0 1px}.isSmall[data-v-d2dc3afc] .el-pagination{padding:10px}.baseTable[data-v-d2dc3afc]{position:relative}.baseTable[data-v-d2dc3afc] .el-table__body-wrapper .el-table-column--selection>.cell{display:block}.column-setting-dialog[data-v-d2dc3afc] .el-dialog{display:flex;flex-direction:column;height:100%}.column-setting-dialog[data-v-d2dc3afc] .el-dialog__body{flex:1;min-height:0;overflow:hidden}.column-setting-body[data-v-d2dc3afc]{height:100%}.column-setting-body[data-v-d2dc3afc] .el-transfer{height:100%;display:flex;justify-content:center;align-items:center}.column-setting-body[data-v-d2dc3afc] .el-transfer-panel{flex:1;width:auto;display:flex;flex-direction:column;overflow:hidden}.column-setting-body[data-v-d2dc3afc] .el-transfer__buttons{display:flex;flex-direction:column;padding:0 10px}.column-setting-body[data-v-d2dc3afc] .el-transfer__buttons .el-button{margin-left:0;margin-bottom:10px;display:flex;justify-content:center;align-items:center}.column-setting-body[data-v-d2dc3afc] .el-transfer__buttons .el-button:last-child{margin-bottom:0}.column-setting-body[data-v-d2dc3afc] .el-transfer__buttons .el-button+.el-button{margin-left:0}.column-setting-body[data-v-d2dc3afc] .el-transfer-panel__body{flex:1;height:auto!important;display:flex;flex-direction:column;overflow:hidden}.column-setting-body[data-v-d2dc3afc] .el-transfer-panel__list{flex:1;height:auto!important;overflow-y:auto}.column-setting-body[data-v-d2dc3afc] .el-transfer-panel__filter{margin:10px 15px}.header[data-v-4277cdf1]{border:1px solid var(--ba-border-color);background-color:var(--ba-bg-color-overlay);font-size:14px;padding:12px 12px 0}.headerContent[data-v-4277cdf1]{padding-bottom:12px}.data-card[data-v-4277cdf1]{border-radius:12px;line-height:32px;border:1px solid var(--ba-border-color);overflow:hidden;height:100%}.checkSize[data-v-4277cdf1] .el-checkbox__inner{height:18px;width:18px}.checkSize[data-v-4277cdf1] .el-checkbox__inner:after{left:5px;width:5px;height:10px}.card-header[data-v-4277cdf1]{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--el-border-color)}.card-header .order-number[data-v-4277cdf1]{display:flex;font-size:15px;overflow:hidden}.card-header .order-number .label[data-v-4277cdf1]{max-width:90px;color:var(--el-text-color-primary);font-weight:500}.card-header .order-number .value[data-v-4277cdf1]{color:var(--el-color-primary);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;cursor:pointer}.info-list[data-v-4277cdf1]{padding:16px}.info-list .info-row[data-v-4277cdf1]{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.info-list .info-item[data-v-4277cdf1]{display:flex;align-items:center;font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden}.info-list .info-item.full-width[data-v-4277cdf1]{grid-column:1/-1}.info-list .info-item .label[data-v-4277cdf1]{color:#666;margin-right:4px}.info-list .info-item .value[data-v-4277cdf1]{color:var(--el-text-color-primary);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.card-footer[data-v-4277cdf1]{display:flex;justify-content:flex-end;flex-wrap:wrap;padding:10px 12px}.card-footer[data-v-4277cdf1] .el-button{margin:4px!important}@media screen and (max-width: 768px){.info-list[data-v-4277cdf1]{padding:12px}.info-list .info-row[data-v-4277cdf1]{grid-template-columns:repeat(2,1fr);gap:8px}.info-item[data-v-4277cdf1]{font-size:13px}.card-footer[data-v-4277cdf1]{padding:8px 12px;flex-wrap:wrap}}@media screen and (max-width: 375px){.info-list .info-row[data-v-4277cdf1]{grid-template-columns:1fr}}.footer[data-v-4277cdf1]{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap}.footer[data-v-4277cdf1] .el-pager li{margin:0 1px}.footer[data-v-4277cdf1] .btn-prev{margin:0 2px}.footer[data-v-4277cdf1] .btn-next{margin:0 0 0 2px}.footer[data-v-4277cdf1] .el-pagination{padding:0;--el-pagination-button-height: 28px;--el-pagination-button-width: 28px}.footer[data-v-4277cdf1]{background-color:var(--ba-bg-color-overlay);padding:8px}

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "ele-scroll-table-vue3",
+  "version": "0.1.4",
+  "type": "module",
+  "main": "./dist/ele-scroll-table-vue3.umd.cjs",
+  "module": "./dist/ele-scroll-table-vue3.mjs",
+  "style": "./dist/style.css",
+  "exports": {
+    ".": {
+      "import": "./dist/ele-scroll-table-vue3.mjs",
+      "require": "./dist/ele-scroll-table-vue3.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5173",
+    "build": "vite build",
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish"
+  },
+  "peerDependencies": {
+    "vue": ">=3.5.0",
+    "element-plus": ">=2.0.0",
+    "@vueuse/core": ">=10.0.0",
+    "e-plus-dialog-vue3": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vue": "^3.5.0",
+    "element-plus": "^2.0.0",
+    "@vueuse/core": "^10.0.0",
+    "e-plus-dialog-vue3": "^1.0.23",
+    "sass": "^1.70.0"
+  }
+}