table.mjs 15 KB

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