el-plus-powerful-table
Version:
## [DOCS](https://peng-xiao-shuai.github.io/vite-vue-admin-docs/zh-CN/component_directive/component/powerful-table-doc.html)
409 lines (408 loc) • 17.8 kB
JavaScript
import { ElTableColumn as He, ElTable as $e, ElOption as Ne, ElSelect as Be, ElButton as xe, ElPagination as Oe, ElLoadingDirective as Ve } from "element-plus/es";
import "element-plus/es/components/base/style/css";
import "element-plus/es/components/loading/style/css";
import "element-plus/es/components/pagination/style/css";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/select/style/css";
import "element-plus/es/components/option/style/css";
import "element-plus/es/components/table/style/css";
import "element-plus/es/components/table-column/style/css";
import { defineComponent as je, toRefs as re, provide as ae, watchEffect as Me, watch as se, nextTick as ie, computed as Ie, useSlots as Ue, useAttrs as Je, resolveComponent as S, openBlock as o, createElementBlock as u, createBlock as p, unref as t, isRef as W, createSlots as ue, withCtx as h, renderSlot as A, createCommentVNode as F, createElementVNode as G, withDirectives as qe, mergeProps as k, resolveDynamicComponent as de, toDisplayString as B, Fragment as R, renderList as Q, normalizeStyle as pe, createVNode as X, createTextVNode as Ke } from "vue";
import { deepClone as fe, getPropType as w } from "../../index.mjs";
import { SizeSymbol as We, JustifyFunSymbol as Ge } from "../../keys.mjs";
import { useFilters as Qe } from "../../filter/useFilters.mjs";
import { powerfulTableProps as Xe, usePowerfulTableStates as Ye, useInitiateListRequest as Ze, useFunction as _e, EmitEnum as s } from "./powerful-table-data.mjs";
import { t as Y } from "../../locale/lang.mjs";
import { LangKey as Z } from "../../locale/packages.mjs";
const et = { class: "pt" }, tt = { class: "pt-table-container" }, nt = { key: 1 }, lt = { style: { display: "inline-block" } }, ot = { key: 0 }, rt = ["innerHTML"], at = { key: 1 }, st = {
key: 1,
class: "bottom-operate pt-bottom-operate"
}, it = {
key: 0,
class: "pt-bottom-operate-left bottom-operate-left"
}, ut = {
key: 1,
class: "pt-bottom-operate-right bottom-operate-right"
}, dt = {
name: "PowerfulTable"
}, Ft = /* @__PURE__ */ je({
...dt,
props: Xe,
setup(ge, { expose: me, emit: ye }) {
const a = ye, d = ge, _ = (l) => ["center", "left", "right"].includes(l) ? { center: "center", left: "flex-start", right: "flex-end" }[l] : "center", {
powerfulTableData: f,
multipleTable: P,
filterComponents: v,
stateData: c,
Size: L,
injectProps: D
} = Ye(d), { handleHeaderFilterChange: x, getPropObj: E } = Qe(
c,
d,
v
), { resetList: Ce, getListData: z } = Ze(
f,
d,
D,
c
), {
handleSelectionChange: ee,
returnEmit: be,
componentEmit: O,
sortChange: he,
batchOperate: ke,
get: ve,
matchComponents: ce,
bindAttr: V
} = _e(a, f), { tableLists: te, isTable: j } = re(c), { listLoading: Se, currentPage: M, pageSize: I, currentSelect: we, operate: g, total: U } = re(f);
ae(We, L), ae(Ge, _), f.watchCache.push(
Me(() => {
Object.assign(f.operate, d.operateData), f.develop = Array.from({
length: c.tableLists.length
}).fill(!1), f.listLoading = !1;
}),
se(
() => c.tableLists,
(l) => {
l.length && ie(() => Ee());
},
{
immediate: !0,
deep: !0
}
),
se(
() => [f.currentPage, f.pageSize],
() => {
var l;
Array.isArray(v.value) && v.value.forEach((n) => {
n.state.value = "";
}), (l = d.listRequest) != null && l.listApi && (z == null || z()), ve();
}
)
);
const J = Ie(() => d.header.filter(
(l) => typeof l.defaultShow == "boolean" ? l.defaultShow : !0
)), Pe = () => {
ie(() => {
var l;
(l = P.value) == null || l.doLayout();
});
}, Ee = (l = d.selectData, n = c.tableLists) => {
var H, $;
if (!d.isSelect)
return;
const C = [];
let m = [];
const T = [
d.selectCompare ? d.selectCompare[0] : "id",
d.selectCompare ? d.selectCompare[1] : "id"
];
if (l.length != 0) {
if (l.forEach((b) => {
const y = n.filter((q) => b[T[0]] == q[T[1]]);
y.length > 0 && C.push(y[0]);
}), C.length > 0) {
m = fe(l);
for (const b in m)
C.forEach((y) => {
y[T[1]] == m[b][T[0]] && m.splice(Number(b), 1);
});
} else
m = fe(l);
f.otherSelect = m, f.currentSelect = C, C.length != 0 ? C.forEach((b) => {
var y;
(y = P.value) == null || y.toggleRowSelection(b, !0);
}) : (H = P.value) == null || H.clearSelection();
} else
($ = P.value) == null || $.clearSelection();
};
return me({
$slots: Ue(),
$attrs: Je(),
$refs: {
multipleTable: P,
filterComponents: v
},
props: d,
injectProps: D,
headerLists: J.value,
headerListsRef: J,
powerfulTableData: f,
stateData: c,
resetList: Ce,
getListData: z,
handleSelectionChange: ee,
anewRender: Pe
}), (l, n) => {
var ne;
const C = S("PTBtnPlus"), m = He, T = S("PTFSelect"), H = S("PTFDatePicker"), $ = S("PTFInput"), b = S("PTRenderJsx"), y = S("PTFilter"), q = S("PTText"), Te = $e, Fe = Ne, Re = Be, Le = xe, Ae = Oe, De = Ve;
return o(), u("div", et, [
l.btnConfig !== void 0 || l.$slots["btn-left"] || l.$slots["btn-right"] ? (o(), p(C, {
key: 0,
ref: "btnPlusRef",
"is-table": t(j),
"onUpdate:isTable": n[0] || (n[0] = (e) => W(j) ? j.value = e : null),
"btn-config": l.btnConfig,
"header-list": l.header,
"multiple-selection": t(we),
onChange: n[1] || (n[1] = (...e) => a(t(s).BtnPlusChange, ...e)),
onRefresh: n[2] || (n[2] = (e) => a(t(s).BtnPlusRefresh))
}, ue({ _: 2 }, [
l.$slots["btn-left"] ? {
name: "btn-left",
fn: h(() => [
A(l.$slots, "btn-left")
]),
key: "0"
} : void 0,
l.$slots["btn-right"] ? {
name: "btn-right",
fn: h(() => [
A(l.$slots, "btn-right")
]),
key: "1"
} : void 0
]), 1032, ["is-table", "btn-config", "header-list", "multiple-selection"])) : F("", !0),
G("div", tt, [
qe((o(), p(Te, k({
ref_key: "multipleTable",
ref: P,
class: "powerful-table",
data: t(te)
}, {
"element-loading-text": "Loading",
border: !0,
fit: !0,
"row-key": "id",
"highlight-current-row": !0,
lazy: l.tree && l.tree.lazy || !1,
load: l.tree && l.tree.load,
"tree-props": l.tree && l.tree.props,
size: t(L),
...l.property
}, {
onSelectionChange: t(ee),
onSortChange: t(he),
onSelect: n[5] || (n[5] = (...e) => a(t(s).Select, ...e)),
onSelectAll: n[6] || (n[6] = (...e) => a(t(s).SelectAll, ...e)),
onCellMouseEnter: n[7] || (n[7] = (...e) => a(t(s).CellMouseEnter, ...e)),
onCellMouseLeave: n[8] || (n[8] = (...e) => a(t(s).CellMouseLeave, ...e)),
onCellClick: n[9] || (n[9] = (...e) => a(t(s).CellClick, ...e)),
onCellDblclick: n[10] || (n[10] = (...e) => a(t(s).CellDblclick, ...e)),
onCellContextmenu: n[11] || (n[11] = (...e) => a(t(s).CellContextmenu, ...e)),
onRowClick: n[12] || (n[12] = (...e) => a(t(s).RowClick, ...e)),
onRowContextmenu: n[13] || (n[13] = (...e) => a(t(s).RowContextmenu, ...e)),
onRowDblclick: n[14] || (n[14] = (...e) => a(t(s).RowDblclick, ...e)),
onHeaderClick: n[15] || (n[15] = (...e) => a(t(s).HeaderClick, ...e)),
onHeaderContextmenu: n[16] || (n[16] = (...e) => a(t(s).HeaderContextmenu, ...e)),
onFilterChange: n[17] || (n[17] = (...e) => a(t(s).FilterChange, ...e)),
onCurrentChange: n[18] || (n[18] = (...e) => a(t(s).CurrentChange, ...e)),
onHeaderDragend: n[19] || (n[19] = (...e) => a(t(s).HeaderDragend, ...e)),
onExpandChange: n[20] || (n[20] = (...e) => a(t(s).ExpandChange, ...e))
}), {
empty: h(() => [
A(l.$slots, "empty", {}, () => [
t(D).emptyElement ? (o(), p(de(t(D).emptyElement), { key: 0 })) : (o(), u("span", nt, B(t(Y)(t(Z).NoData)), 1))
])
]),
default: h(() => [
l.isSelect ? (o(), p(m, {
key: 0,
align: "center",
type: "selection",
width: "45",
selectable: l.selectable ? l.selectable : () => !0
}, null, 8, ["selectable"])) : F("", !0),
(o(!0), u(R, null, Q(t(J), (e, N) => (o(), p(m, k({
key: e.label + N
}, { ref_for: !0 }, {
fixed: e.fixed || !1,
sortable: e.sortable || !1,
"header-align": e.headerAlign || "center",
"show-overflow-tooltip": e.overflowTooltip || !1,
prop: Array.isArray(e.props) ? e.props[0].prop : e.props.prop,
label: e.label,
"min-width": e.minWidth || 140,
width: e.width || "",
align: e.headerAlign || "center",
"class-name": e.headerAlign || "center",
...e.property
}), ue({
default: h((i) => [
G("div", lt, [
(o(!0), u(R, null, Q(Array.isArray(e.props) ? e.props : [e.props], (r, ze) => {
var le, oe;
return o(), u(R, {
key: "props" + ze
}, [
t(w)(r, i) == "slot" ? A(l.$slots, r.slotName || "default", {
key: 0,
row: i.row,
index: i.$index,
onClick: n[3] || (n[3] = (K) => K.stopPropagation())
}) : (o(), u("div", {
key: 1,
style: pe({
display: "flex",
alignItems: "center",
width: "100%",
justifyContent: _(((le = e.property) == null ? void 0 : le.align) || e.headerAlign),
...r.style || {}
}),
onClick: n[4] || (n[4] = (K) => K.stopPropagation())
}, [
r.text ? (o(), u("span", {
key: 0,
style: pe({ marginRight: r.text ? "10px" : "0px" })
}, B(r.text), 5)) : F("", !0),
typeof r.render == "function" ? (o(), p(b, {
key: 1,
row: i.row,
index: i.$index,
prop: r,
aligning: ((oe = e.property) == null ? void 0 : oe.align) || e.headerAlign
}, null, 8, ["row", "index", "prop", "aligning"])) : (o(), u(R, { key: 2 }, [
(i.row[r.prop] == null || i.row[r.prop] == null) && t(w)(r, i) != "btn" ? (o(), u("div", ot, [
r.reserve ? (o(), u("div", {
key: 0,
innerHTML: r.reserve
}, null, 8, rt)) : (o(), u("div", at, [
G("span", null, B(t(Y)(t(Z).NoData)), 1)
]))
])) : t(w)(r, i) && [
"image",
"btn",
"switch",
"input",
"textarea",
"iconfont",
"tag",
"rate",
"href",
"video"
].includes(t(w)(r, i)) ? (o(), p(de(t(ce)(t(w)(r, i))), k({
key: 1,
ref_for: !0
}, t(V)(r, i, e), {
onReturnEmit: t(be),
onComponentEmit: t(O)
}), null, 16, ["onReturnEmit", "onComponentEmit"])) : r.filters && (t(w)(r, i) == "text" || t(w)(r, i) == null) ? (o(), p(y, k({
key: 2,
ref_for: !0
}, t(V)(r, i, e), { onComponentEmit: t(O) }), null, 16, ["onComponentEmit"])) : (o(), p(q, k({
key: 3,
ref_for: !0
}, t(V)(r, i, e), {
"list-length": t(te).length,
onComponentEmit: t(O)
}), null, 16, ["list-length", "onComponentEmit"]))
], 64))
], 4))
], 64);
}), 128))
])
]),
_: 2
}, [
(e.isShowOrFilterColumn == null || e.isShowOrFilterColumn === "filter") && !e.headerSlotName || e.headerSlotName ? {
name: "header",
fn: h(() => [
e.headerSlotName ? A(l.$slots, e.headerSlotName, {
key: 0,
item: e,
index: N
}) : (o(), u(R, { key: 1 }, [
t(E)(e).filters && Array.isArray(t(E)(e).filters) && t(E)(e).filtersType === "select" || t(E)(e).type === "switch" ? (o(), p(T, {
key: 0,
ref_for: !0,
ref_key: "filterComponents",
ref: v,
"header-data": e,
list: l.list,
"prop-data": t(E)(e),
onHeaderFilterChange: t(x)
}, null, 8, ["header-data", "list", "prop-data", "onHeaderFilterChange"])) : t(E)(e).filtersType === "date" ? (o(), p(H, {
key: 1,
ref_for: !0,
ref_key: "filterComponents",
ref: v,
"header-data": e,
list: l.list,
onHeaderFilterChange: t(x)
}, null, 8, ["header-data", "list", "onHeaderFilterChange"])) : (o(), p($, {
key: 2,
ref_for: !0,
ref_key: "filterComponents",
ref: v,
"header-data": e,
list: l.list,
onHeaderFilterChange: t(x)
}, null, 8, ["header-data", "list", "onHeaderFilterChange"]))
], 64))
]),
key: "0"
} : void 0
]), 1040))), 128))
]),
_: 3
}, 16, ["data", "onSelectionChange", "onSortChange"])), [
[De, t(Se)]
])
]),
t(g) && l.isSelect && t(g).operates || l.isPagination && t(U) ? (o(), u("div", st, [
t(g) && l.isSelect && t(g).operates ? (o(), u("div", it, [
X(Re, k({
modelValue: t(g).value,
"onUpdate:modelValue": n[21] || (n[21] = (e) => t(g).value = e)
}, {
clearable: !0,
size: t(L),
...t(g).selectProperty || {
style: "200px"
}
}), {
default: h(() => [
(o(!0), u(R, null, Q(t(g).operates, (e, N) => (o(), p(Fe, {
key: "operate" + N,
label: e.label,
value: e.value
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 16, ["modelValue"]),
X(Le, k({ class: "search-button" }, {
style: { marginLeft: "20px" },
type: "primary",
size: t(L),
...t(g).btnProperty || {}
}, { onClick: t(ke) }), {
default: h(() => [
Ke(B(t(Y)(t(Z).Confirm)), 1)
]),
_: 1
}, 16, ["onClick"])
])) : F("", !0),
l.isPagination && t(U) ? (o(), u("div", ut, [
X(Ae, k({
"current-page": t(M),
"onUpdate:currentPage": n[22] || (n[22] = (e) => W(M) ? M.value = e : null),
"page-size": t(I),
"onUpdate:pageSize": n[23] || (n[23] = (e) => W(I) ? I.value = e : null),
small: t(L) === "small"
}, {
pageSizes: [10, 20, 30],
layout: "total, sizes, prev, pager, next",
...l.paginationProperty || {},
total: (ne = l.paginationProperty) != null && ne.pageCount ? void 0 : t(U)
}), null, 16, ["current-page", "page-size", "small"])
])) : F("", !0)
])) : F("", !0)
]);
};
}
});
export {
Ft as default
};
//# sourceMappingURL=powerful-table.vue.mjs.map