ea4e2e979596cecb0da7c517e2c77e1ad0579038a8bf957d0914ac4eea576e498196d4fd7e3b6b24dac7b6e0b1ee3ead5ab1805e1d222b669a5ee2fe2f2768 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  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. resizeProxyVisible,
  95. bodyWidth,
  96. resizeState,
  97. doLayout,
  98. tableBodyStyles,
  99. tableLayout: tableLayout$1,
  100. scrollbarViewStyle,
  101. scrollbarStyle
  102. } = styleHelper["default"](props, layout, store, table);
  103. const { scrollBarRef, scrollTo, setScrollLeft, setScrollTop } = useScrollbar.useScrollbar();
  104. const debouncedUpdateLayout = lodashUnified.debounce(doLayout, 50);
  105. const tableId = `${ns.namespace.value}-table_${tableIdSeed++}`;
  106. table.tableId = tableId;
  107. table.state = {
  108. isGroup,
  109. resizeState,
  110. doLayout,
  111. debouncedUpdateLayout
  112. };
  113. const computedSumText = vue.computed(() => {
  114. var _a;
  115. return (_a = props.sumText) != null ? _a : t("el.table.sumText");
  116. });
  117. const computedEmptyText = vue.computed(() => {
  118. var _a;
  119. return (_a = props.emptyText) != null ? _a : t("el.table.emptyText");
  120. });
  121. const columns = vue.computed(() => {
  122. return utilsHelper.convertToRows(store.states.originColumns.value)[0];
  123. });
  124. keyRenderHelper["default"](table);
  125. vue.onBeforeUnmount(() => {
  126. debouncedUpdateLayout.cancel();
  127. });
  128. return {
  129. ns,
  130. layout,
  131. store,
  132. columns,
  133. handleHeaderFooterMousewheel,
  134. handleMouseLeave,
  135. tableId,
  136. tableSize,
  137. isHidden,
  138. isEmpty,
  139. renderExpanded,
  140. resizeProxyVisible,
  141. resizeState,
  142. isGroup,
  143. bodyWidth,
  144. tableBodyStyles,
  145. emptyBlockStyle,
  146. debouncedUpdateLayout,
  147. setCurrentRow,
  148. getSelectionRows,
  149. toggleRowSelection,
  150. clearSelection,
  151. clearFilter,
  152. toggleAllSelection,
  153. toggleRowExpansion,
  154. clearSort,
  155. doLayout,
  156. sort,
  157. updateKeyChildren,
  158. t,
  159. setDragVisible,
  160. context: table,
  161. computedSumText,
  162. computedEmptyText,
  163. tableLayout: tableLayout$1,
  164. scrollbarViewStyle,
  165. scrollbarStyle,
  166. scrollBarRef,
  167. scrollTo,
  168. setScrollLeft,
  169. setScrollTop,
  170. allowDragLastColumn: props.allowDragLastColumn
  171. };
  172. }
  173. });
  174. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  175. const _component_hColgroup = vue.resolveComponent("hColgroup");
  176. const _component_table_header = vue.resolveComponent("table-header");
  177. const _component_table_body = vue.resolveComponent("table-body");
  178. const _component_table_footer = vue.resolveComponent("table-footer");
  179. const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  180. const _directive_mousewheel = vue.resolveDirective("mousewheel");
  181. return vue.openBlock(), vue.createElementBlock("div", {
  182. ref: "tableWrapper",
  183. class: vue.normalizeClass([
  184. {
  185. [_ctx.ns.m("fit")]: _ctx.fit,
  186. [_ctx.ns.m("striped")]: _ctx.stripe,
  187. [_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
  188. [_ctx.ns.m("hidden")]: _ctx.isHidden,
  189. [_ctx.ns.m("group")]: _ctx.isGroup,
  190. [_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
  191. [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
  192. [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
  193. [_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
  194. [_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
  195. "has-footer": _ctx.showSummary
  196. },
  197. _ctx.ns.m(_ctx.tableSize),
  198. _ctx.className,
  199. _ctx.ns.b(),
  200. _ctx.ns.m(`layout-${_ctx.tableLayout}`)
  201. ]),
  202. style: vue.normalizeStyle(_ctx.style),
  203. "data-prefix": _ctx.ns.namespace.value,
  204. onMouseleave: _ctx.handleMouseLeave
  205. }, [
  206. vue.createElementVNode("div", {
  207. class: vue.normalizeClass(_ctx.ns.e("inner-wrapper"))
  208. }, [
  209. vue.createElementVNode("div", {
  210. ref: "hiddenColumns",
  211. class: "hidden-columns"
  212. }, [
  213. vue.renderSlot(_ctx.$slots, "default")
  214. ], 512),
  215. _ctx.showHeader && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  216. key: 0,
  217. ref: "headerWrapper",
  218. class: vue.normalizeClass(_ctx.ns.e("header-wrapper"))
  219. }, [
  220. vue.createElementVNode("table", {
  221. ref: "tableHeader",
  222. class: vue.normalizeClass(_ctx.ns.e("header")),
  223. style: vue.normalizeStyle(_ctx.tableBodyStyles),
  224. border: "0",
  225. cellpadding: "0",
  226. cellspacing: "0"
  227. }, [
  228. vue.createVNode(_component_hColgroup, {
  229. columns: _ctx.store.states.columns.value,
  230. "table-layout": _ctx.tableLayout
  231. }, null, 8, ["columns", "table-layout"]),
  232. vue.createVNode(_component_table_header, {
  233. ref: "tableHeaderRef",
  234. border: _ctx.border,
  235. "default-sort": _ctx.defaultSort,
  236. store: _ctx.store,
  237. "append-filter-panel-to": _ctx.appendFilterPanelTo,
  238. "allow-drag-last-column": _ctx.allowDragLastColumn,
  239. onSetDragVisible: _ctx.setDragVisible
  240. }, null, 8, ["border", "default-sort", "store", "append-filter-panel-to", "allow-drag-last-column", "onSetDragVisible"])
  241. ], 6)
  242. ], 2)), [
  243. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  244. ]) : vue.createCommentVNode("v-if", true),
  245. vue.createElementVNode("div", {
  246. ref: "bodyWrapper",
  247. class: vue.normalizeClass(_ctx.ns.e("body-wrapper"))
  248. }, [
  249. vue.createVNode(_component_el_scrollbar, {
  250. ref: "scrollBarRef",
  251. "view-style": _ctx.scrollbarViewStyle,
  252. "wrap-style": _ctx.scrollbarStyle,
  253. always: _ctx.scrollbarAlwaysOn,
  254. tabindex: _ctx.scrollbarTabindex,
  255. native: _ctx.nativeScrollbar,
  256. onScroll: ($event) => _ctx.$emit("scroll", $event)
  257. }, {
  258. default: vue.withCtx(() => [
  259. vue.createElementVNode("table", {
  260. ref: "tableBody",
  261. class: vue.normalizeClass(_ctx.ns.e("body")),
  262. cellspacing: "0",
  263. cellpadding: "0",
  264. border: "0",
  265. style: vue.normalizeStyle({
  266. width: _ctx.bodyWidth,
  267. tableLayout: _ctx.tableLayout
  268. })
  269. }, [
  270. vue.createVNode(_component_hColgroup, {
  271. columns: _ctx.store.states.columns.value,
  272. "table-layout": _ctx.tableLayout
  273. }, null, 8, ["columns", "table-layout"]),
  274. _ctx.showHeader && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_header, {
  275. key: 0,
  276. ref: "tableHeaderRef",
  277. class: vue.normalizeClass(_ctx.ns.e("body-header")),
  278. border: _ctx.border,
  279. "default-sort": _ctx.defaultSort,
  280. store: _ctx.store,
  281. "append-filter-panel-to": _ctx.appendFilterPanelTo,
  282. onSetDragVisible: _ctx.setDragVisible
  283. }, null, 8, ["class", "border", "default-sort", "store", "append-filter-panel-to", "onSetDragVisible"])) : vue.createCommentVNode("v-if", true),
  284. vue.createVNode(_component_table_body, {
  285. context: _ctx.context,
  286. highlight: _ctx.highlightCurrentRow,
  287. "row-class-name": _ctx.rowClassName,
  288. "tooltip-effect": _ctx.tooltipEffect,
  289. "tooltip-options": _ctx.tooltipOptions,
  290. "row-style": _ctx.rowStyle,
  291. store: _ctx.store,
  292. stripe: _ctx.stripe
  293. }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "tooltip-options", "row-style", "store", "stripe"]),
  294. _ctx.showSummary && _ctx.tableLayout === "auto" ? (vue.openBlock(), vue.createBlock(_component_table_footer, {
  295. key: 1,
  296. class: vue.normalizeClass(_ctx.ns.e("body-footer")),
  297. border: _ctx.border,
  298. "default-sort": _ctx.defaultSort,
  299. store: _ctx.store,
  300. "sum-text": _ctx.computedSumText,
  301. "summary-method": _ctx.summaryMethod
  302. }, null, 8, ["class", "border", "default-sort", "store", "sum-text", "summary-method"])) : vue.createCommentVNode("v-if", true)
  303. ], 6),
  304. _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", {
  305. key: 0,
  306. ref: "emptyBlock",
  307. style: vue.normalizeStyle(_ctx.emptyBlockStyle),
  308. class: vue.normalizeClass(_ctx.ns.e("empty-block"))
  309. }, [
  310. vue.createElementVNode("span", {
  311. class: vue.normalizeClass(_ctx.ns.e("empty-text"))
  312. }, [
  313. vue.renderSlot(_ctx.$slots, "empty", {}, () => [
  314. vue.createTextVNode(vue.toDisplayString(_ctx.computedEmptyText), 1)
  315. ])
  316. ], 2)
  317. ], 6)) : vue.createCommentVNode("v-if", true),
  318. _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
  319. key: 1,
  320. ref: "appendWrapper",
  321. class: vue.normalizeClass(_ctx.ns.e("append-wrapper"))
  322. }, [
  323. vue.renderSlot(_ctx.$slots, "append")
  324. ], 2)) : vue.createCommentVNode("v-if", true)
  325. ]),
  326. _: 3
  327. }, 8, ["view-style", "wrap-style", "always", "tabindex", "native", "onScroll"])
  328. ], 2),
  329. _ctx.showSummary && _ctx.tableLayout === "fixed" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
  330. key: 1,
  331. ref: "footerWrapper",
  332. class: vue.normalizeClass(_ctx.ns.e("footer-wrapper"))
  333. }, [
  334. vue.createElementVNode("table", {
  335. class: vue.normalizeClass(_ctx.ns.e("footer")),
  336. cellspacing: "0",
  337. cellpadding: "0",
  338. border: "0",
  339. style: vue.normalizeStyle(_ctx.tableBodyStyles)
  340. }, [
  341. vue.createVNode(_component_hColgroup, {
  342. columns: _ctx.store.states.columns.value,
  343. "table-layout": _ctx.tableLayout
  344. }, null, 8, ["columns", "table-layout"]),
  345. vue.createVNode(_component_table_footer, {
  346. border: _ctx.border,
  347. "default-sort": _ctx.defaultSort,
  348. store: _ctx.store,
  349. "sum-text": _ctx.computedSumText,
  350. "summary-method": _ctx.summaryMethod
  351. }, null, 8, ["border", "default-sort", "store", "sum-text", "summary-method"])
  352. ], 6)
  353. ], 2)), [
  354. [vue.vShow, !_ctx.isEmpty],
  355. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  356. ]) : vue.createCommentVNode("v-if", true),
  357. _ctx.border || _ctx.isGroup ? (vue.openBlock(), vue.createElementBlock("div", {
  358. key: 2,
  359. class: vue.normalizeClass(_ctx.ns.e("border-left-patch"))
  360. }, null, 2)) : vue.createCommentVNode("v-if", true)
  361. ], 2),
  362. vue.withDirectives(vue.createElementVNode("div", {
  363. ref: "resizeProxy",
  364. class: vue.normalizeClass(_ctx.ns.e("column-resize-proxy"))
  365. }, null, 2), [
  366. [vue.vShow, _ctx.resizeProxyVisible]
  367. ])
  368. ], 46, ["data-prefix", "onMouseleave"]);
  369. }
  370. var Table = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "table.vue"]]);
  371. exports["default"] = Table;
  372. //# sourceMappingURL=table.js.map