373 lines
14 KiB
JavaScript
373 lines
14 KiB
JavaScript
import { defineComponent, getCurrentInstance, provide, computed, onBeforeUnmount, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, withDirectives, createVNode, createCommentVNode, withCtx, createBlock, createTextVNode, toDisplayString, vShow } from 'vue';
|
|
import { debounce } from 'lodash-unified';
|
|
import { ElScrollbar } from '../../scrollbar/index.mjs';
|
|
import { createStore } from './store/helper.mjs';
|
|
import TableLayout from './table-layout.mjs';
|
|
import TableHeader from './table-header/index.mjs';
|
|
import TableBody from './table-body/index.mjs';
|
|
import TableFooter from './table-footer/index.mjs';
|
|
import useUtils from './table/utils-helper.mjs';
|
|
import { convertToRows } from './table-header/utils-helper.mjs';
|
|
import useStyle from './table/style-helper.mjs';
|
|
import useKeyRender from './table/key-render-helper.mjs';
|
|
import defaultProps from './table/defaults.mjs';
|
|
import { TABLE_INJECTION_KEY } from './tokens.mjs';
|
|
import { hColgroup } from './h-helper.mjs';
|
|
import { useScrollbar } from './composables/use-scrollbar.mjs';
|
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
|
import Mousewheel from '../../../directives/mousewheel/index.mjs';
|
|
import { useLocale } from '../../../hooks/use-locale/index.mjs';
|
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
|
|
|
let tableIdSeed = 1;
|
|
const _sfc_main = defineComponent({
|
|
name: "ElTable",
|
|
directives: {
|
|
Mousewheel
|
|
},
|
|
components: {
|
|
TableHeader,
|
|
TableBody,
|
|
TableFooter,
|
|
ElScrollbar,
|
|
hColgroup
|
|
},
|
|
props: defaultProps,
|
|
emits: [
|
|
"select",
|
|
"select-all",
|
|
"selection-change",
|
|
"cell-mouse-enter",
|
|
"cell-mouse-leave",
|
|
"cell-contextmenu",
|
|
"cell-click",
|
|
"cell-dblclick",
|
|
"row-click",
|
|
"row-contextmenu",
|
|
"row-dblclick",
|
|
"header-click",
|
|
"header-contextmenu",
|
|
"sort-change",
|
|
"filter-change",
|
|
"current-change",
|
|
"header-dragend",
|
|
"expand-change",
|
|
"scroll"
|
|
],
|
|
setup(props) {
|
|
const { t } = useLocale();
|
|
const ns = useNamespace("table");
|
|
const table = getCurrentInstance();
|
|
provide(TABLE_INJECTION_KEY, table);
|
|
const store = createStore(table, props);
|
|
table.store = store;
|
|
const layout = new TableLayout({
|
|
store: table.store,
|
|
table,
|
|
fit: props.fit,
|
|
showHeader: props.showHeader
|
|
});
|
|
table.layout = layout;
|
|
const isEmpty = computed(() => (store.states.data.value || []).length === 0);
|
|
const {
|
|
setCurrentRow,
|
|
getSelectionRows,
|
|
toggleRowSelection,
|
|
clearSelection,
|
|
clearFilter,
|
|
toggleAllSelection,
|
|
toggleRowExpansion,
|
|
clearSort,
|
|
sort,
|
|
updateKeyChildren
|
|
} = useUtils(store);
|
|
const {
|
|
isHidden,
|
|
renderExpanded,
|
|
setDragVisible,
|
|
isGroup,
|
|
handleMouseLeave,
|
|
handleHeaderFooterMousewheel,
|
|
tableSize,
|
|
emptyBlockStyle,
|
|
resizeProxyVisible,
|
|
bodyWidth,
|
|
resizeState,
|
|
doLayout,
|
|
tableBodyStyles,
|
|
tableLayout,
|
|
scrollbarViewStyle,
|
|
scrollbarStyle
|
|
} = useStyle(props, layout, store, table);
|
|
const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar();
|
|
const debouncedUpdateLayout = debounce(doLayout, 50);
|
|
const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
|
|
table.tableId = tableId;
|
|
table.state = {
|
|
isGroup,
|
|
resizeState,
|
|
doLayout,
|
|
debouncedUpdateLayout
|
|
};
|
|
const computedSumText = computed(() => {
|
|
var _a;
|
|
return (_a = props.sumText) != null ? _a : t("el.table.sumText");
|
|
});
|
|
const computedEmptyText = computed(() => {
|
|
var _a;
|
|
return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
|
|
});
|
|
const columns = computed(() => {
|
|
return convertToRows(store.states.originColumns.value)[0];
|
|
});
|
|
useKeyRender(table);
|
|
onBeforeUnmount(() => {
|
|
debouncedUpdateLayout.cancel();
|
|
});
|
|
return {
|
|
ns,
|
|
layout,
|
|
store,
|
|
columns,
|
|
handleHeaderFooterMousewheel,
|
|
handleMouseLeave,
|
|
tableId,
|
|
tableSize,
|
|
isHidden,
|
|
isEmpty,
|
|
renderExpanded,
|
|
resizeProxyVisible,
|
|
resizeState,
|
|
isGroup,
|
|
bodyWidth,
|
|
tableBodyStyles,
|
|
emptyBlockStyle,
|
|
debouncedUpdateLayout,
|
|
setCurrentRow,
|
|
getSelectionRows,
|
|
toggleRowSelection,
|
|
clearSelection,
|
|
clearFilter,
|
|
toggleAllSelection,
|
|
toggleRowExpansion,
|
|
clearSort,
|
|
doLayout,
|
|
sort,
|
|
updateKeyChildren,
|
|
t,
|
|
setDragVisible,
|
|
context: table,
|
|
computedSumText,
|
|
computedEmptyText,
|
|
tableLayout,
|
|
scrollbarViewStyle,
|
|
scrollbarStyle,
|
|
scrollBarRef,
|
|
scrollTo,
|
|
setScrollLeft,
|
|
setScrollTop,
|
|
allowDragLastColumn: props.allowDragLastColumn
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_hColgroup = resolveComponent("hColgroup");
|
|
const _component_table_header = resolveComponent("table-header");
|
|
const _component_table_body = resolveComponent("table-body");
|
|
const _component_table_footer = resolveComponent("table-footer");
|
|
const _component_el_scrollbar = resolveComponent("el-scrollbar");
|
|
const _directive_mousewheel = resolveDirective("mousewheel");
|
|
return openBlock(), createElementBlock("div", {
|
|
ref: "tableWrapper",
|
|
class: normalizeClass([
|
|
{
|
|
[_ctx.ns.m("fit")]: _ctx.fit,
|
|
[_ctx.ns.m("striped")]: _ctx.stripe,
|
|
[_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
|
|
[_ctx.ns.m("hidden")]: _ctx.isHidden,
|
|
[_ctx.ns.m("group")]: _ctx.isGroup,
|
|
[_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
|
|
[_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
|
|
[_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
|
|
[_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
|
|
[_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
|
|
"has-footer": _ctx.showSummary
|
|
},
|
|
_ctx.ns.m(_ctx.tableSize),
|
|
_ctx.className,
|
|
_ctx.ns.b(),
|
|
_ctx.ns.m(`layout-${_ctx.tableLayout}`)
|
|
]),
|
|
style: normalizeStyle(_ctx.style),
|
|
"data-prefix": _ctx.ns.namespace.value,
|
|
onMouseleave: _ctx.handleMouseLeave
|
|
}, [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(_ctx.ns.e("inner-wrapper"))
|
|
}, [
|
|
createElementVNode("div", {
|
|
ref: "hiddenColumns",
|
|
class: "hidden-columns"
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 512),
|
|
_ctx.showHeader && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "headerWrapper",
|
|
class: normalizeClass(_ctx.ns.e("header-wrapper"))
|
|
}, [
|
|
createElementVNode("table", {
|
|
ref: "tableHeader",
|
|
class: normalizeClass(_ctx.ns.e("header")),
|
|
style: normalizeStyle(_ctx.tableBodyStyles),
|
|
border: "0",
|
|
cellpadding: "0",
|
|
cellspacing: "0"
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
createVNode(_component_table_header, {
|
|
ref: "tableHeaderRef",
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"append-filter-panel-to": _ctx.appendFilterPanelTo,
|
|
"allow-drag-last-column": _ctx.allowDragLastColumn,
|
|
onSetDragVisible: _ctx.setDragVisible
|
|
}, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "allow-drag-last-column", "onSetDragVisible"])
|
|
], 6)
|
|
], 2)), [
|
|
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
|
|
]) : createCommentVNode("v-if", true),
|
|
createElementVNode("div", {
|
|
ref: "bodyWrapper",
|
|
class: normalizeClass(_ctx.ns.e("body-wrapper"))
|
|
}, [
|
|
createVNode(_component_el_scrollbar, {
|
|
ref: "scrollBarRef",
|
|
"view-style": _ctx.scrollbarViewStyle,
|
|
"wrap-style": _ctx.scrollbarStyle,
|
|
always: _ctx.scrollbarAlwaysOn,
|
|
tabindex: _ctx.scrollbarTabindex,
|
|
native: _ctx.nativeScrollbar,
|
|
onScroll: ($event) => _ctx.$emit("scroll", $event)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("table", {
|
|
ref: "tableBody",
|
|
class: normalizeClass(_ctx.ns.e("body")),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
border: "0",
|
|
style: normalizeStyle({
|
|
width: _ctx.bodyWidth,
|
|
tableLayout: _ctx.tableLayout
|
|
})
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
_ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
|
|
key: 0,
|
|
ref: "tableHeaderRef",
|
|
class: normalizeClass(_ctx.ns.e("body-header")),
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"append-filter-panel-to": _ctx.appendFilterPanelTo,
|
|
onSetDragVisible: _ctx.setDragVisible
|
|
}, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : createCommentVNode("v-if", true),
|
|
createVNode(_component_table_body, {
|
|
context: _ctx.context,
|
|
highlight: _ctx.highlightCurrentRow,
|
|
"row-class-name": _ctx.rowClassName,
|
|
"tooltip-effect": _ctx.tooltipEffect,
|
|
"tooltip-options": _ctx.tooltipOptions,
|
|
"row-style": _ctx.rowStyle,
|
|
store: _ctx.store,
|
|
stripe: _ctx.stripe
|
|
}, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]),
|
|
_ctx.showSummary && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_footer, {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.ns.e("body-footer")),
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"sum-text": _ctx.computedSumText,
|
|
"summary-method": _ctx.summaryMethod
|
|
}, null, 8, ["class", "border", "default-sort", "store", "sum-text", "summary-method"])) : createCommentVNode("v-if", true)
|
|
], 6),
|
|
_ctx.isEmpty ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "emptyBlock",
|
|
style: normalizeStyle(_ctx.emptyBlockStyle),
|
|
class: normalizeClass(_ctx.ns.e("empty-block"))
|
|
}, [
|
|
createElementVNode("span", {
|
|
class: normalizeClass(_ctx.ns.e("empty-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)
|
|
])
|
|
], 2)
|
|
], 6)) : createCommentVNode("v-if", true),
|
|
_ctx.$slots.append ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref: "appendWrapper",
|
|
class: normalizeClass(_ctx.ns.e("append-wrapper"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "append")
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
]),
|
|
_: 3
|
|
}, 8, ["view-style", "wrap-style", "always", "tabindex", "native", "onScroll"])
|
|
], 2),
|
|
_ctx.showSummary && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
ref: "footerWrapper",
|
|
class: normalizeClass(_ctx.ns.e("footer-wrapper"))
|
|
}, [
|
|
createElementVNode("table", {
|
|
class: normalizeClass(_ctx.ns.e("footer")),
|
|
cellspacing: "0",
|
|
cellpadding: "0",
|
|
border: "0",
|
|
style: normalizeStyle(_ctx.tableBodyStyles)
|
|
}, [
|
|
createVNode(_component_hColgroup, {
|
|
columns: _ctx.store.states.columns.value,
|
|
"table-layout": _ctx.tableLayout
|
|
}, null, 8, ["columns", "table-layout"]),
|
|
createVNode(_component_table_footer, {
|
|
border: _ctx.border,
|
|
"default-sort": _ctx.defaultSort,
|
|
store: _ctx.store,
|
|
"sum-text": _ctx.computedSumText,
|
|
"summary-method": _ctx.summaryMethod
|
|
}, null, 8, ["border", "default-sort", "store", "sum-text", "summary-method"])
|
|
], 6)
|
|
], 2)), [
|
|
[vShow, !_ctx.isEmpty],
|
|
[_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
|
|
]) : createCommentVNode("v-if", true),
|
|
_ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", {
|
|
key: 2,
|
|
class: normalizeClass(_ctx.ns.e("border-left-patch"))
|
|
}, null, 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
withDirectives(createElementVNode("div", {
|
|
ref: "resizeProxy",
|
|
class: normalizeClass(_ctx.ns.e("column-resize-proxy"))
|
|
}, null, 2), [
|
|
[vShow, _ctx.resizeProxyVisible]
|
|
])
|
|
], 46, ["data-prefix", "onMouseleave"]);
|
|
}
|
|
var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "table.vue"]]);
|
|
|
|
export { Table as default };
|
|
//# sourceMappingURL=table.mjs.map
|