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