You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

377 lines
14 KiB

3 months ago
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var index$4 = require('../../scrollbar/index.js');
  6. var helper = require('./store/helper.js');
  7. var tableLayout = require('./table-layout.js');
  8. var index$1 = require('./table-header/index.js');
  9. var index$2 = require('./table-body/index.js');
  10. var index$3 = require('./table-footer/index.js');
  11. var utilsHelper$1 = require('./table/utils-helper.js');
  12. var utilsHelper = require('./table-header/utils-helper.js');
  13. var styleHelper = require('./table/style-helper.js');
  14. var keyRenderHelper = require('./table/key-render-helper.js');
  15. var defaults = require('./table/defaults.js');
  16. var tokens = require('./tokens.js');
  17. var hHelper = require('./h-helper.js');
  18. var useScrollbar = require('./composables/use-scrollbar.js');
  19. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  20. var index = require('../../../directives/mousewheel/index.js');
  21. var index$5 = require('../../../hooks/use-locale/index.js');
  22. var index$6 = require('../../../hooks/use-namespace/index.js');
  23. let tableIdSeed = 1;
  24. const _sfc_main = vue.defineComponent({
  25. name: "ElTable",
  26. directives: {
  27. Mousewheel: index["default"]
  28. },
  29. components: {
  30. TableHeader: index$1["default"],
  31. TableBody: index$2["default"],
  32. TableFooter: index$3["default"],
  33. ElScrollbar: index$4.ElScrollbar,
  34. hColgroup: hHelper.hColgroup
  35. },
  36. props: defaults["default"],
  37. emits: [
  38. "select",
  39. "select-all",
  40. "selection-change",
  41. "cell-mouse-enter",
  42. "cell-mouse-leave",
  43. "cell-contextmenu",
  44. "cell-click",
  45. "cell-dblclick",
  46. "row-click",
  47. "row-contextmenu",
  48. "row-dblclick",
  49. "header-click",
  50. "header-contextmenu",
  51. "sort-change",
  52. "filter-change",
  53. "current-change",
  54. "header-dragend",
  55. "expand-change",
  56. "scroll"
  57. ],
  58. setup(props) {
  59. const { t } = index$5.useLocale();
  60. const ns = index$6.useNamespace("table");
  61. const table = vue.getCurrentInstance();
  62. vue.provide(tokens.TABLE_INJECTION_KEY, table);
  63. const store = helper.createStore(table, props);
  64. table.store = store;
  65. const layout = new tableLayout["default"]({
  66. store: table.store,
  67. table,
  68. fit: props.fit,
  69. showHeader: props.showHeader
  70. });
  71. table.layout = layout;
  72. const isEmpty = vue.computed(() => (store.states.data.value || []).length === 0);
  73. const {
  74. setCurrentRow,
  75. getSelectionRows,
  76. toggleRowSelection,
  77. clearSelection,
  78. clearFilter,
  79. toggleAllSelection,
  80. toggleRowExpansion,
  81. clearSort,
  82. sort,
  83. updateKeyChildren
  84. } = utilsHelper$1["default"](store);
  85. const {
  86. isHidden,
  87. renderExpanded,
  88. setDragVisible,
  89. isGroup,
  90. handleMouseLeave,
  91. handleHeaderFooterMousewheel,
  92. tableSize,
  93. emptyBlockStyle,
  94. handleFixedMousewheel,
  95. resizeProxyVisible,
  96. bodyWidth,
  97. resizeState,
  98. doLayout,
  99. tableBodyStyles,
  100. tableLayout: tableLayout$1,
  101. scrollbarViewStyle,
  102. scrollbarStyle
  103. } = styleHelper["default"](props, layout, store, table);
  104. const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar.useScrollbar();
  105. const debouncedUpdateLayout = lodashUnified.debounce(doLayout, 50);
  106. const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
  107. table.tableId = tableId;
  108. table.state = {
  109. isGroup,
  110. resizeState,
  111. doLayout,
  112. debouncedUpdateLayout
  113. };
  114. const computedSumText = vue.computed(() => {
  115. var _a;
  116. return (_a = props.sumText) != null ? _a : t("el.table.sumText");
  117. });
  118. const computedEmptyText = vue.computed(() => {
  119. var _a;
  120. return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
  121. });
  122. const columns = vue.computed(() => {
  123. return utilsHelper.convertToRows(store.states.originColumns.value)[0];
  124. });
  125. keyRenderHelper["default"](table);
  126. vue.onBeforeUnmount(() => {
  127. debouncedUpdateLayout.cancel();
  128. });
  129. return {
  130. ns,
  131. layout,
  132. store,
  133. columns,
  134. handleHeaderFooterMousewheel,
  135. handleMouseLeave,
  136. tableId,
  137. tableSize,
  138. isHidden,
  139. isEmpty,
  140. renderExpanded,
  141. resizeProxyVisible,
  142. resizeState,
  143. isGroup,
  144. bodyWidth,
  145. tableBodyStyles,
  146. emptyBlockStyle,
  147. debouncedUpdateLayout,
  148. handleFixedMousewheel,
  149. setCurrentRow,
  150. getSelectionRows,
  151. toggleRowSelection,
  152. clearSelection,
  153. clearFilter,
  154. toggleAllSelection,
  155. toggleRowExpansion,
  156. clearSort,
  157. doLayout,
  158. sort,
  159. updateKeyChildren,
  160. t,
  161. setDragVisible,
  162. context: table,
  163. computedSumText,
  164. computedEmptyText,
  165. tableLayout: tableLayout$1,
  166. scrollbarViewStyle,
  167. scrollbarStyle,
  168. scrollBarRef,
  169. scrollTo,
  170. setScrollLeft,
  171. setScrollTop,
  172. allowDragLastColumn: props.allowDragLastColumn
  173. };
  174. }
  175. });
  176. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  177. const _component_hColgroup = vue.resolveComponent("hColgroup");
  178. const _component_table_header = vue.resolveComponent("table-header");
  179. const _component_table_body = vue.resolveComponent("table-body");
  180. const _component_table_footer = vue.resolveComponent("table-footer");
  181. const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  182. const _directive_mousewheel = vue.resolveDirective("mousewheel");
  183. return vue.openBlock(), vue.createElementBlock("div", {
  184. ref: "tableWrapper",
  185. class: vue.normalizeClass([
  186. {
  187. [_ctx.ns.m("fit")]: _ctx.fit,
  188. [_ctx.ns.m("striped")]: _ctx.stripe,
  189. [_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
  190. [_ctx.ns.m("hidden")]: _ctx.isHidden,
  191. [_ctx.ns.m("group")]: _ctx.isGroup,
  192. [_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
  193. [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
  194. [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
  195. [_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
  196. [_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
  197. "has-footer": _ctx.showSummary
  198. },
  199. _ctx.ns.m(_ctx.tableSize),
  200. _ctx.className,
  201. _ctx.ns.b(),
  202. _ctx.ns.m(`layout-${_ctx.tableLayout}`)
  203. ]),
  204. style: vue.normalizeStyle(_ctx.style),
  205. "data-prefix": _ctx.ns.namespace.value,
  206. onMouseleave: _ctx.handleMouseLeave
  207. }, [
  208. vue.createElementVNode("div", {
  209. class: vue.normalizeClass(_ctx.ns.e("inner-wrapper"))
  210. }, [
  211. vue.createElementVNode("div", {
  212. ref: "hiddenColumns",
  213. class: "hidden-columns"
  214. }, [
  215. vue.renderSlot(_ctx.$slots, "default")
  216. ], 512),
  217. _ctx.showHeader && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  218. key: 0,
  219. ref: "headerWrapper",
  220. class: vue.normalizeClass(_ctx.ns.e("header-wrapper"))
  221. }, [
  222. vue.createElementVNode("table", {
  223. ref: "tableHeader",
  224. class: vue.normalizeClass(_ctx.ns.e("header")),
  225. style: vue.normalizeStyle(_ctx.tableBodyStyles),
  226. border: "0",
  227. cellpadding: "0",
  228. cellspacing: "0"
  229. }, [
  230. vue.createVNode(_component_hColgroup, {
  231. columns: _ctx.store.states.columns.value,
  232. "table-layout": _ctx.tableLayout
  233. }, null, 8, ["columns", "table-layout"]),
  234. vue.createVNode(_component_table_header, {
  235. ref: "tableHeaderRef",
  236. border: _ctx.border,
  237. "default-sort": _ctx.defaultSort,
  238. store: _ctx.store,
  239. "append-filter-panel-to": _ctx.appendFilterPanelTo,
  240. "allow-drag-last-column": _ctx.allowDragLastColumn,
  241. onSetDragVisible: _ctx.setDragVisible
  242. }, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "allow-drag-last-column", "onSetDragVisible"])
  243. ], 6)
  244. ], 2)), [
  245. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  246. ]) : vue.createCommentVNode("v-if", true),
  247. vue.createElementVNode("div", {
  248. ref: "bodyWrapper",
  249. class: vue.normalizeClass(_ctx.ns.e("body-wrapper"))
  250. }, [
  251. vue.createVNode(_component_el_scrollbar, {
  252. ref: "scrollBarRef",
  253. "view-style": _ctx.scrollbarViewStyle,
  254. "wrap-style": _ctx.scrollbarStyle,
  255. always: _ctx.scrollbarAlwaysOn,
  256. tabindex: _ctx.scrollbarTabindex,
  257. onScroll: ($event) => _ctx.$emit("scroll", $event)
  258. }, {
  259. default: vue.withCtx(() => [
  260. vue.createElementVNode("table", {
  261. ref: "tableBody",
  262. class: vue.normalizeClass(_ctx.ns.e("body")),
  263. cellspacing: "0",
  264. cellpadding: "0",
  265. border: "0",
  266. style: vue.normalizeStyle({
  267. width: _ctx.bodyWidth,
  268. tableLayout: _ctx.tableLayout
  269. })
  270. }, [
  271. vue.createVNode(_component_hColgroup, {
  272. columns: _ctx.store.states.columns.value,
  273. "table-layout": _ctx.tableLayout
  274. }, null, 8, ["columns", "table-layout"]),
  275. _ctx.showHeader && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_header, {
  276. key: 0,
  277. ref: "tableHeaderRef",
  278. class: vue.normalizeClass(_ctx.ns.e("body-header")),
  279. border: _ctx.border,
  280. "default-sort": _ctx.defaultSort,
  281. store: _ctx.store,
  282. "append-filter-panel-to": _ctx.appendFilterPanelTo,
  283. onSetDragVisible: _ctx.setDragVisible
  284. }, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : vue.createCommentVNode("v-if", true),
  285. vue.createVNode(_component_table_body, {
  286. context: _ctx.context,
  287. highlight: _ctx.highlightCurrentRow,
  288. "row-class-name": _ctx.rowClassName,
  289. "tooltip-effect": _ctx.tooltipEffect,
  290. "tooltip-options": _ctx.tooltipOptions,
  291. "row-style": _ctx.rowStyle,
  292. store: _ctx.store,
  293. stripe: _ctx.stripe
  294. }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]),
  295. _ctx.showSummary && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_footer, {
  296. key: 1,
  297. class: vue.normalizeClass(_ctx.ns.e("body-footer")),
  298. border: _ctx.border,
  299. "default-sort": _ctx.defaultSort,
  300. store: _ctx.store,
  301. "sum-text": _ctx.computedSumText,
  302. "summary-method": _ctx.summaryMethod
  303. }, null, 8, ["class", "border", "default-sort", "store", "sum-text", "summary-method"])) : vue.createCommentVNode("v-if", true)
  304. ], 6),
  305. _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
  306. key: 0,
  307. ref: "emptyBlock",
  308. style: vue.normalizeStyle(_ctx.emptyBlockStyle),
  309. class: vue.normalizeClass(_ctx.ns.e("empty-block"))
  310. }, [
  311. vue.createElementVNode("span", {
  312. class: vue.normalizeClass(_ctx.ns.e("empty-text"))
  313. }, [
  314. vue.renderSlot(_ctx.$slots, "empty", {}, () => [
  315. vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
  316. ])
  317. ], 2)
  318. ], 6)) : vue.createCommentVNode("v-if", true),
  319. _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
  320. key: 1,
  321. ref: "appendWrapper",
  322. class: vue.normalizeClass(_ctx.ns.e("append-wrapper"))
  323. }, [
  324. vue.renderSlot(_ctx.$slots, "append")
  325. ], 2)) : vue.createCommentVNode("v-if", true)
  326. ]),
  327. _: 3
  328. }, 8, ["view-style", "wrap-style", "always", "tabindex", "onScroll"])
  329. ], 2),
  330. _ctx.showSummary && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  331. key: 1,
  332. ref: "footerWrapper",
  333. class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
  334. }, [
  335. vue.createElementVNode("table", {
  336. class: vue.normalizeClass(_ctx.ns.e("footer")),
  337. cellspacing: "0",
  338. cellpadding: "0",
  339. border: "0",
  340. style: vue.normalizeStyle(_ctx.tableBodyStyles)
  341. }, [
  342. vue.createVNode(_component_hColgroup, {
  343. columns: _ctx.store.states.columns.value,
  344. "table-layout": _ctx.tableLayout
  345. }, null, 8, ["columns", "table-layout"]),
  346. vue.createVNode(_component_table_footer, {
  347. border: _ctx.border,
  348. "default-sort": _ctx.defaultSort,
  349. store: _ctx.store,
  350. "sum-text": _ctx.computedSumText,
  351. "summary-method": _ctx.summaryMethod
  352. }, null, 8, ["border", "default-sort", "store", "sum-text", "summary-method"])
  353. ], 6)
  354. ], 2)), [
  355. [vue.vShow, !_ctx.isEmpty],
  356. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  357. ]) : vue.createCommentVNode("v-if", true),
  358. _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
  359. key: 2,
  360. class: vue.normalizeClass(_ctx.ns.e("border-left-patch"))
  361. }, null, 2)) : vue.createCommentVNode("v-if", true)
  362. ], 2),
  363. vue.withDirectives(vue.createElementVNode("div", {
  364. ref: "resizeProxy",
  365. class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy"))
  366. }, null, 2), [
  367. [vue.vShow, _ctx.resizeProxyVisible]
  368. ])
  369. ], 46, ["data-prefix", "onMouseleave"]);
  370. }
  371. var Table = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "table.vue"]]);
  372. exports["default"] = Table;
  373. //# sourceMappingURL=table.js.map