ysj-plus-table/dist/plus-table.es.js

A Vue 3 table component based on Element Plus

import { getCurrentInstance as ke, ref as b, computed as _e, watch as T, onMounted as Se, resolveComponent as u, resolveDirective as J, openBlock as l, createElementBlock as i, unref as X, renderSlot as Z, createVNode as C, withCtx as d, Fragment as h, renderList as k, createBlock as s, normalizeStyle as j, createCommentVNode as x, createTextVNode as m, toDisplayString as _, createElementVNode as Ce, withDirectives as ee, normalizeClass as je } from "vue";
const Ve = (f, O) => {
  const V = f.__vccOpts || f;
  for (const [z, t] of O)
    V[z] = t;
  return V;
}, ze = { class: "right-main ysj-plus-table" }, Pe = {
  key: 0,
  class: "search-base-block"
}, Re = {
  key: 1,
  class: "search-base-block"
}, Ie = { class: "table-base-block" }, Ue = {
  key: 0,
  class: "table-base-buttom"
}, Be = {
  key: 1,
  class: "table-base-buttom"
}, Oe = {
  key: 0,
  class: "table-operation"
}, Fe = {
  key: 2,
  class: "pagination-container"
}, Ne = {
  __name: "index",
  props: {
    // 表格列配置
    columns: {
      type: Array,
      default: () => []
    },
    // 搜索列配置
    searchColumns: {
      type: Array,
      default: () => []
    },
    // 工具栏配置
    toolBarRender: {
      type: Array,
      default: () => []
    },
    // 是否显示序号
    showIndex: {
      type: Boolean,
      default: !0
    },
    // 是否显示选择框
    selection: {
      type: Boolean,
      default: !1
    },
    // 分页配置
    pagination: {
      type: [Boolean, Object],
      default: !0
    },
    // 表格数据
    dataSource: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: !1
    },
    // 表格属性
    border: {
      type: Boolean,
      default: !1
    },
    stripe: {
      type: Boolean,
      default: !0
    },
    height: {
      type: [String, Number],
      default: null
    },
    maxHeight: {
      type: [String, Number],
      default: null
    },
    rowKey: {
      type: [String, Function],
      default: "id"
    },
    treeProps: {
      type: Object,
      default: () => ({})
    },
    defaultExpandAll: {
      type: Boolean,
      default: !1
    },
    expandRowKeys: {
      type: Array,
      default: () => []
    },
    rowClassName: {
      type: [String, Function],
      default: null
    },
    rowStyle: {
      type: [Object, Function],
      default: null
    },
    cellClassName: {
      type: [String, Function],
      default: null
    },
    cellStyle: {
      type: [Object, Function],
      default: null
    },
    headerRowClassName: {
      type: [String, Function],
      default: null
    },
    headerRowStyle: {
      type: [Object, Function],
      default: null
    },
    headerCellClassName: {
      type: [String, Function],
      default: null
    },
    headerCellStyle: {
      type: [Object, Function],
      default: null
    },
    highlightCurrentRow: {
      type: Boolean,
      default: !1
    },
    currentRowKey: {
      type: [String, Number],
      default: null
    },
    emptyText: {
      type: String,
      default: "暂无数据"
    },
    defaultSort: {
      type: Object,
      default: () => ({
        prop: "",
        order: ""
      })
    },
    tooltipEffect: {
      type: String,
      default: "dark"
    },
    showSummary: {
      type: Boolean,
      default: !1
    },
    sumText: {
      type: String,
      default: "合计"
    },
    summaryMethod: {
      type: Function,
      default: null
    },
    spanMethod: {
      type: Function,
      default: null
    },
    selectOnIndeterminate: {
      type: Boolean,
      default: !0
    },
    indent: {
      type: Number,
      default: 16
    },
    lazy: {
      type: Boolean,
      default: !1
    },
    load: {
      type: Function,
      default: null
    },
    style: {
      type: [String, Object],
      default: null
    },
    class: {
      type: [String, Object],
      default: null
    },
    tableLayout: {
      type: String,
      default: "auto"
    },
    scrollbarAlwaysOn: {
      type: Boolean,
      default: !1
    },
    showOverflowTooltip: {
      type: Boolean,
      default: !0
    },
    fit: {
      type: Boolean,
      default: !0
    },
    size: {
      type: String,
      default: "default"
    },
    resizeObserver: {
      type: Boolean,
      default: !0
    },
    flex: {
      type: Boolean,
      default: !1
    },
    // 初始化搜索参数
    initSearchParam: {
      type: Object,
      default: () => ({})
    },
    // 请求API
    requestApi: {
      type: Function,
      required: !0
    },
    // 分页器显示数量
    pagerCount: {
      type: Number,
      default: 5
    },
    // 树形API URL
    treeApiUrl: {
      type: [String, Function],
      default: ""
    }
  },
  emits: [
    "update:dataSource",
    "update:loading",
    "update:pagination",
    "select",
    "select-all",
    "selection-change",
    "cell-click",
    "row-click",
    "row-contextmenu",
    "row-dblclick",
    "header-click",
    "header-contextmenu",
    "sort-change",
    "filter-change",
    "expand-change",
    "current-change",
    "size-change",
    "page-change"
  ],
  setup(f, { expose: O, emit: V }) {
    const z = ke(), t = f, p = V, F = b(!1), M = b([]), E = b(0), P = b(1), R = b(10), n = b({ ...t.initSearchParam }), N = b(null), S = b(!1), Y = b(!0), A = b(3), H = _e(() => ({
      children: "children",
      label: "label"
    }));
    T(() => t.initSearchParam, (a) => {
      n.value = { ...a };
    }, { deep: !0 }), T(() => t.searchColumns, (a) => {
      a && a.length > 0 && (Y.value = !0);
    }, { immediate: !0 }), T(() => t.toolBarRender, (a) => {
      console.log("toolBarRender changed:", a);
    }, { immediate: !0 });
    const $ = () => {
      P.value = 1, I();
    }, K = () => {
      N.value && N.value.resetFields(), n.value = { ...t.initSearchParam }, $();
    }, ae = () => {
      S.value = !S.value;
    }, le = (a, r) => {
      p("select", a, r);
    }, re = (a) => {
      p("select-all", a);
    }, oe = (a) => {
      p("selection-change", a);
    }, ne = (a, r, c, U) => {
      p("cell-click", a, r, c, U);
    }, se = (a, r, c) => {
      p("row-click", a, r, c);
    }, ie = (a, r, c) => {
      p("row-contextmenu", a, r, c);
    }, de = (a, r, c) => {
      p("row-dblclick", a, r, c);
    }, pe = (a, r) => {
      p("header-click", a, r);
    }, ce = (a, r) => {
      p("header-contextmenu", a, r);
    }, ue = ({ column: a, prop: r, order: c }) => {
      p("sort-change", { column: a, prop: r, order: c });
    }, he = (a) => {
      p("filter-change", a);
    }, ye = (a, r) => {
      p("expand-change", a, r);
    }, L = (a) => {
      p("current-change", a);
    }, fe = (a) => {
      R.value = a, I();
    }, I = async () => {
      try {
        F.value = !0;
        const a = {
          pageNum: P.value,
          pageSize: R.value,
          ...n.value
        }, r = await t.requestApi(a);
        r.code === 200 && (M.value = r.rows || [], E.value = r.total || 0);
      } catch (a) {
        console.error("获取表格数据失败:", a);
      } finally {
        F.value = !1;
      }
    };
    return O({
      resetQuery: K,
      handleQuery: $,
      getTableData: I
    }), Se(() => {
      I();
    }), (a, r) => {
      const c = u("el-option"), U = u("el-select"), q = u("el-tree-select"), Q = u("el-date-picker"), W = u("el-input"), D = u("el-form-item"), v = u("el-button"), be = u("el-form"), ge = u("el-upload"), G = u("el-table-column"), me = u("el-table"), we = u("el-pagination"), xe = J("hasPermi"), ve = J("loading");
      return l(), i("div", ze, [
        X(z).slots.searchBar ? (l(), i("div", Pe, [
          Z(a.$slots, "searchBar", {}, void 0, !0)
        ])) : f.columns && f.columns.length > 0 ? (l(), i("div", Re, [
          C(be, {
            model: n.value,
            ref_key: "searchRef",
            ref: N,
            inline: !0
          }, {
            default: d(() => [
              Y.value ? (l(), i(h, { key: 0 }, [
                (l(!0), i(h, null, k(f.columns, (e, w) => (l(), i(h, { key: w }, [
                  e.showSearch && w < A.value ? (l(), s(D, {
                    key: 0,
                    label: e.title,
                    prop: e.dataIndex
                  }, {
                    default: d(() => {
                      var g, y;
                      return [
                        e.showSearch.type === "select" ? (l(), s(U, {
                          key: 0,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请选择${e.title}`,
                          clearable: ((g = e == null ? void 0 : e.showSearch) == null ? void 0 : g.clearable) !== "false",
                          style: j(`width: ${e.showSearch.width}px`)
                        }, {
                          default: d(() => [
                            (l(!0), i(h, null, k(e.valueEnum, (o) => (l(), s(c, {
                              key: o.value,
                              label: o.label,
                              value: o.value
                            }, null, 8, ["label", "value"]))), 128))
                          ]),
                          _: 2
                        }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "clearable", "style"])) : e.showSearch.type === "treeSelect" ? (l(), s(q, {
                          key: 1,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请选择${e.title}`,
                          data: e.showSearch.data,
                          "value-key": "areaCode",
                          "node-key": "areaCode",
                          props: ((y = e.showSearch) == null ? void 0 : y.treeSelectProps) || H.value,
                          filterable: "",
                          "render-after-expand": !1,
                          "check-strictly": !0,
                          clearable: ""
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "data", "props"])) : e.showSearch.type === "dateRange" ? (l(), s(Q, {
                          key: 2,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          "value-format": "YYYY-MM-DD",
                          type: "daterange",
                          "range-separator": "-",
                          "start-placeholder": e.showSearch.startPlaceholder || "开始日期",
                          "end-placeholder": e.showSearch.endPlaceholder || "结束日期"
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "start-placeholder", "end-placeholder"])) : (l(), s(W, {
                          key: 3,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请输入${e.title}`,
                          clearable: "",
                          style: j(`width: ${e.showSearch.width}px`)
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "style"]))
                      ];
                    }),
                    _: 2
                  }, 1032, ["label", "prop"])) : e.showSearch && w >= A.value && S.value ? (l(), s(D, {
                    key: 1,
                    label: e.title,
                    prop: e.dataIndex
                  }, {
                    default: d(() => {
                      var g, y;
                      return [
                        e.showSearch.type === "select" ? (l(), s(U, {
                          key: 0,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请选择${e.title}`,
                          clearable: ((g = e == null ? void 0 : e.showSearch) == null ? void 0 : g.clearable) !== "false",
                          style: j(`width: ${e.showSearch.width}px`)
                        }, {
                          default: d(() => [
                            (l(!0), i(h, null, k(e.valueEnum, (o) => (l(), s(c, {
                              key: o.value,
                              label: o.label,
                              value: o.value
                            }, null, 8, ["label", "value"]))), 128))
                          ]),
                          _: 2
                        }, 1032, ["modelValue", "onUpdate:modelValue", "placeholder", "clearable", "style"])) : e.showSearch.type === "treeSelect" ? (l(), s(q, {
                          key: 1,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请选择${e.title}`,
                          data: e.showSearch.data,
                          "value-key": "areaCode",
                          "node-key": "areaCode",
                          props: ((y = e.showSearch) == null ? void 0 : y.treeSelectProps) || H.value,
                          filterable: "",
                          "render-after-expand": !1,
                          "check-strictly": !0,
                          clearable: ""
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "data", "props"])) : e.showSearch.type === "dateRange" ? (l(), s(Q, {
                          key: 2,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          "value-format": "YYYY-MM-DD",
                          type: "daterange",
                          "range-separator": "-",
                          "start-placeholder": e.showSearch.startPlaceholder || "开始日期",
                          "end-placeholder": e.showSearch.endPlaceholder || "结束日期"
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "start-placeholder", "end-placeholder"])) : (l(), s(W, {
                          key: 3,
                          modelValue: n.value[e.dataIndex],
                          "onUpdate:modelValue": (o) => n.value[e.dataIndex] = o,
                          placeholder: e.showSearch.placeholder || `请输入${e.title}`,
                          clearable: "",
                          style: j(`width: ${e.showSearch.width}px`)
                        }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "style"]))
                      ];
                    }),
                    _: 2
                  }, 1032, ["label", "prop"])) : x("", !0)
                ], 64))), 128)),
                C(D, null, {
                  default: d(() => [
                    C(v, {
                      type: "primary",
                      icon: "Search",
                      onClick: $,
                      class: "search-btn"
                    }, {
                      default: d(() => r[2] || (r[2] = [
                        m("搜索")
                      ])),
                      _: 1,
                      __: [2]
                    }),
                    C(v, {
                      icon: "RefreshLeft",
                      onClick: K,
                      type: "warning",
                      class: "reset-btn"
                    }, {
                      default: d(() => r[3] || (r[3] = [
                        m("重置")
                      ])),
                      _: 1,
                      __: [3]
                    }),
                    f.columns.filter((e) => e.showSearch).length > A.value ? (l(), s(v, {
                      key: 0,
                      icon: S.value ? "ArrowUp" : "ArrowDown",
                      type: "text",
                      size: "small",
                      onClick: ae
                    }, {
                      default: d(() => [
                        m(_(S.value ? "收起" : "展开"), 1)
                      ]),
                      _: 1
                    }, 8, ["icon"])) : x("", !0)
                  ]),
                  _: 1
                })
              ], 64)) : x("", !0)
            ]),
            _: 1
          }, 8, ["model"])
        ])) : x("", !0),
        Ce("div", Ie, [
          X(z).slots.toolBar ? (l(), i("div", Ue, [
            Z(a.$slots, "toolBar", {}, void 0, !0)
          ])) : t.toolBarRender && t.toolBarRender.length > 0 ? (l(), i("div", Be, [
            (l(!0), i(h, null, k(t.toolBarRender, (e, w) => (l(), i(h, { key: w }, [
              e.toolBarProps && e.toolBarProps.type === "el-upload" ? (l(), s(ge, {
                key: 0,
                accept: ".xlsx, .xls",
                action: e.toolBarProps.action,
                headers: e.toolBarProps.headers,
                "on-progress": e.toolBarProps.handleProgress,
                "show-file-list": !1,
                "on-success": e.toolBarProps.handleUploadSuccess,
                style: { "margin-right": "8px" }
              }, {
                default: d(() => [
                  ee((l(), s(v, {
                    plain: "",
                    icon: e.icon || "Upload",
                    type: "primary"
                  }, {
                    default: d(() => [
                      m(_(e.title || "导入"), 1)
                    ]),
                    _: 2
                  }, 1032, ["icon"])), [
                    [xe, [`${e == null ? void 0 : e.hasPermission}`]]
                  ])
                ]),
                _: 2
              }, 1032, ["action", "headers", "on-progress", "on-success"])) : (l(), s(v, {
                key: 1,
                type: e.type || "primary",
                icon: e.icon,
                plain: "",
                onClick: e.handleClick,
                style: { "margin-right": "8px" }
              }, {
                default: d(() => [
                  m(_(e.title), 1)
                ]),
                _: 2
              }, 1032, ["type", "icon", "onClick"]))
            ], 64))), 128))
          ])) : x("", !0),
          ee((l(), s(me, {
            data: M.value,
            border: t.border,
            stripe: t.stripe,
            height: t.height,
            "max-height": t.maxHeight,
            "row-key": t.rowKey,
            "tree-props": t.treeProps,
            "default-expand-all": t.defaultExpandAll,
            "expand-row-keys": t.expandRowKeys,
            "row-class-name": t.rowClassName,
            "row-style": t.rowStyle,
            "cell-class-name": t.cellClassName,
            "cell-style": t.cellStyle,
            "header-row-class-name": t.headerRowClassName,
            "header-row-style": t.headerRowStyle,
            "header-cell-class-name": t.headerCellClassName,
            "header-cell-style": t.headerCellStyle,
            "highlight-current-row": t.highlightCurrentRow,
            "current-row-key": t.currentRowKey,
            "empty-text": t.emptyText,
            "default-sort": t.defaultSort,
            "tooltip-effect": t.tooltipEffect,
            "show-summary": t.showSummary,
            "sum-text": t.sumText,
            "summary-method": t.summaryMethod,
            "span-method": t.spanMethod,
            "select-on-indeterminate": t.selectOnIndeterminate,
            indent: t.indent,
            lazy: t.lazy,
            load: t.load,
            style: j(t.style),
            class: je(t.class),
            "table-layout": t.tableLayout,
            "scrollbar-always-on": t.scrollbarAlwaysOn,
            "show-overflow-tooltip": t.showOverflowTooltip,
            fit: t.fit,
            size: t.size,
            "resize-observer": t.resizeObserver,
            flex: t.flex,
            onSelect: le,
            onSelectAll: re,
            onSelectionChange: oe,
            onCellClick: ne,
            onRowClick: se,
            onRowContextmenu: ie,
            onRowDblclick: de,
            onHeaderClick: pe,
            onHeaderContextmenu: ce,
            onSortChange: ue,
            onFilterChange: he,
            onExpandChange: ye,
            onCurrentChange: L
          }, {
            default: d(() => [
              t.selection ? (l(), s(G, {
                key: 0,
                type: "selection",
                width: "55",
                align: "center",
                fixed: "left"
              })) : x("", !0),
              (l(!0), i(h, null, k(t.columns, (e, w) => (l(), s(G, {
                key: w,
                prop: e.dataIndex,
                label: e.title,
                type: e.type,
                width: e.width,
                "min-width": e.minWidth,
                fixed: e.fixed,
                sortable: e.sorter,
                "sort-method": e.sortMethod,
                "sort-by": e.sortBy,
                "sort-orders": e.sortOrders,
                resizable: e.resizable,
                formatter: e.formatter,
                "show-overflow-tooltip": e.showOverflowTooltip,
                align: e.align,
                "header-align": e.headerAlign,
                "class-name": e.className,
                "label-class-name": e.labelClassName,
                "reserve-selection": e.reserveSelection,
                filters: e.filters,
                "filter-placement": e.filterPlacement,
                "filter-multiple": e.filterMultiple,
                "filter-method": e.filterMethod,
                "filtered-value": e.filteredValue
              }, {
                default: d((g) => [
                  e.render ? (l(), i(h, { key: 0 }, [
                    e.columnsType === "operate" ? (l(), i("div", Oe, [
                      (l(!0), i(h, null, k(e.render(g.row), (y, o) => (l(), s(v, {
                        key: o,
                        type: y.type || "text",
                        icon: y.icon,
                        plain: y.plain,
                        onClick: y.handleFun
                      }, {
                        default: d(() => [
                          m(_(y.title), 1)
                        ]),
                        _: 2
                      }, 1032, ["type", "icon", "plain", "onClick"]))), 128))
                    ])) : (l(), i(h, { key: 1 }, [
                      m(_(e.render(g.row).text), 1)
                    ], 64))
                  ], 64)) : (l(), i(h, { key: 1 }, [
                    m(_(g.row[e.dataIndex]), 1)
                  ], 64))
                ]),
                _: 2
              }, 1032, ["prop", "label", "type", "width", "min-width", "fixed", "sortable", "sort-method", "sort-by", "sort-orders", "resizable", "formatter", "show-overflow-tooltip", "align", "header-align", "class-name", "label-class-name", "reserve-selection", "filters", "filter-placement", "filter-multiple", "filter-method", "filtered-value"]))), 128))
            ]),
            _: 1
          }, 8, ["data", "border", "stripe", "height", "max-height", "row-key", "tree-props", "default-expand-all", "expand-row-keys", "row-class-name", "row-style", "cell-class-name", "cell-style", "header-row-class-name", "header-row-style", "header-cell-class-name", "header-cell-style", "highlight-current-row", "current-row-key", "empty-text", "default-sort", "tooltip-effect", "show-summary", "sum-text", "summary-method", "span-method", "select-on-indeterminate", "indent", "lazy", "load", "style", "class", "table-layout", "scrollbar-always-on", "show-overflow-tooltip", "fit", "size", "resize-observer", "flex"])), [
            [ve, F.value]
          ]),
          t.pagination ? (l(), i("div", Fe, [
            C(we, {
              "current-page": P.value,
              "onUpdate:currentPage": r[0] || (r[0] = (e) => P.value = e),
              "page-size": R.value,
              "onUpdate:pageSize": r[1] || (r[1] = (e) => R.value = e),
              "page-sizes": [10, 20, 30, 40],
              small: t.pagination.small,
              background: t.pagination.background,
              layout: t.pagination.layout || "total, sizes, prev, pager, next, jumper",
              total: E.value,
              onSizeChange: fe,
              onCurrentChange: L
            }, null, 8, ["current-page", "page-size", "small", "background", "layout", "total"])
          ])) : x("", !0)
        ])
      ]);
    };
  }
}, B = /* @__PURE__ */ Ve(Ne, [["__scopeId", "data-v-12910e8a"]]);
B.name = "YsjPlusTable";
const te = function(f) {
  f.component(B.name, B);
};
typeof window < "u" && window.Vue && te(window.Vue);
const $e = {
  install: te,
  PlusTable: B
};
export {
  B as PlusTable,
  $e as default
};
//# sourceMappingURL=plus-table.es.js.map