table.mjs 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. import { defineComponent, getCurrentInstance, provide, computed, 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 '../../../directives/index.mjs';
  4. import '../../../hooks/index.mjs';
  5. import { ElScrollbar } from '../../scrollbar/index.mjs';
  6. import { createStore } from './store/helper.mjs';
  7. import TableLayout from './table-layout.mjs';
  8. import TableHeader from './table-header/index.mjs';
  9. import TableBody from './table-body/index.mjs';
  10. import TableFooter from './table-footer/index.mjs';
  11. import useUtils from './table/utils-helper.mjs';
  12. import useStyle from './table/style-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. ],
  55. setup(props) {
  56. const { t } = useLocale();
  57. const ns = useNamespace("table");
  58. const table = getCurrentInstance();
  59. provide(TABLE_INJECTION_KEY, table);
  60. const store = createStore(table, props);
  61. table.store = store;
  62. const layout = new TableLayout({
  63. store: table.store,
  64. table,
  65. fit: props.fit,
  66. showHeader: props.showHeader
  67. });
  68. table.layout = layout;
  69. const isEmpty = computed(() => (store.states.data.value || []).length === 0);
  70. const {
  71. setCurrentRow,
  72. getSelectionRows,
  73. toggleRowSelection,
  74. clearSelection,
  75. clearFilter,
  76. toggleAllSelection,
  77. toggleRowExpansion,
  78. clearSort,
  79. sort
  80. } = useUtils(store);
  81. const {
  82. isHidden,
  83. renderExpanded,
  84. setDragVisible,
  85. isGroup,
  86. handleMouseLeave,
  87. handleHeaderFooterMousewheel,
  88. tableSize,
  89. emptyBlockStyle,
  90. handleFixedMousewheel,
  91. resizeProxyVisible,
  92. bodyWidth,
  93. resizeState,
  94. doLayout,
  95. tableBodyStyles,
  96. tableLayout,
  97. scrollbarViewStyle,
  98. tableInnerStyle,
  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(() => props.sumText || t("el.table.sumText"));
  112. const computedEmptyText = computed(() => {
  113. return props.emptyText || t("el.table.emptyText");
  114. });
  115. return {
  116. ns,
  117. layout,
  118. store,
  119. handleHeaderFooterMousewheel,
  120. handleMouseLeave,
  121. tableId,
  122. tableSize,
  123. isHidden,
  124. isEmpty,
  125. renderExpanded,
  126. resizeProxyVisible,
  127. resizeState,
  128. isGroup,
  129. bodyWidth,
  130. tableBodyStyles,
  131. emptyBlockStyle,
  132. debouncedUpdateLayout,
  133. handleFixedMousewheel,
  134. setCurrentRow,
  135. getSelectionRows,
  136. toggleRowSelection,
  137. clearSelection,
  138. clearFilter,
  139. toggleAllSelection,
  140. toggleRowExpansion,
  141. clearSort,
  142. doLayout,
  143. sort,
  144. t,
  145. setDragVisible,
  146. context: table,
  147. computedSumText,
  148. computedEmptyText,
  149. tableLayout,
  150. scrollbarViewStyle,
  151. tableInnerStyle,
  152. scrollbarStyle,
  153. scrollBarRef,
  154. scrollTo,
  155. setScrollLeft,
  156. setScrollTop
  157. };
  158. }
  159. });
  160. const _hoisted_1 = ["data-prefix"];
  161. const _hoisted_2 = {
  162. ref: "hiddenColumns",
  163. class: "hidden-columns"
  164. };
  165. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  166. const _component_hColgroup = resolveComponent("hColgroup");
  167. const _component_table_header = resolveComponent("table-header");
  168. const _component_table_body = resolveComponent("table-body");
  169. const _component_el_scrollbar = resolveComponent("el-scrollbar");
  170. const _component_table_footer = resolveComponent("table-footer");
  171. const _directive_mousewheel = resolveDirective("mousewheel");
  172. return openBlock(), createElementBlock("div", {
  173. ref: "tableWrapper",
  174. class: normalizeClass([
  175. {
  176. [_ctx.ns.m("fit")]: _ctx.fit,
  177. [_ctx.ns.m("striped")]: _ctx.stripe,
  178. [_ctx.ns.m("border")]: _ctx.border || _ctx.isGroup,
  179. [_ctx.ns.m("hidden")]: _ctx.isHidden,
  180. [_ctx.ns.m("group")]: _ctx.isGroup,
  181. [_ctx.ns.m("fluid-height")]: _ctx.maxHeight,
  182. [_ctx.ns.m("scrollable-x")]: _ctx.layout.scrollX.value,
  183. [_ctx.ns.m("scrollable-y")]: _ctx.layout.scrollY.value,
  184. [_ctx.ns.m("enable-row-hover")]: !_ctx.store.states.isComplex.value,
  185. [_ctx.ns.m("enable-row-transition")]: (_ctx.store.states.data.value || []).length !== 0 && (_ctx.store.states.data.value || []).length < 100,
  186. "has-footer": _ctx.showSummary
  187. },
  188. _ctx.ns.m(_ctx.tableSize),
  189. _ctx.className,
  190. _ctx.ns.b(),
  191. _ctx.ns.m(`layout-${_ctx.tableLayout}`)
  192. ]),
  193. style: normalizeStyle(_ctx.style),
  194. "data-prefix": _ctx.ns.namespace.value,
  195. onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.handleMouseLeave())
  196. }, [
  197. createElementVNode("div", {
  198. class: normalizeClass(_ctx.ns.e("inner-wrapper")),
  199. style: normalizeStyle(_ctx.tableInnerStyle)
  200. }, [
  201. createElementVNode("div", _hoisted_2, [
  202. renderSlot(_ctx.$slots, "default")
  203. ], 512),
  204. _ctx.showHeader && _ctx.tableLayout === "fixed" ? withDirectives((openBlock(), createElementBlock("div", {
  205. key: 0,
  206. ref: "headerWrapper",
  207. class: normalizeClass(_ctx.ns.e("header-wrapper"))
  208. }, [
  209. createElementVNode("table", {
  210. ref: "tableHeader",
  211. class: normalizeClass(_ctx.ns.e("header")),
  212. style: normalizeStyle(_ctx.tableBodyStyles),
  213. border: "0",
  214. cellpadding: "0",
  215. cellspacing: "0"
  216. }, [
  217. createVNode(_component_hColgroup, {
  218. columns: _ctx.store.states.columns.value,
  219. "table-layout": _ctx.tableLayout
  220. }, null, 8, ["columns", "table-layout"]),
  221. createVNode(_component_table_header, {
  222. ref: "tableHeaderRef",
  223. border: _ctx.border,
  224. "default-sort": _ctx.defaultSort,
  225. store: _ctx.store,
  226. onSetDragVisible: _ctx.setDragVisible
  227. }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])
  228. ], 6)
  229. ], 2)), [
  230. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  231. ]) : createCommentVNode("v-if", true),
  232. createElementVNode("div", {
  233. ref: "bodyWrapper",
  234. class: normalizeClass(_ctx.ns.e("body-wrapper"))
  235. }, [
  236. createVNode(_component_el_scrollbar, {
  237. ref: "scrollBarRef",
  238. "view-style": _ctx.scrollbarViewStyle,
  239. "wrap-style": _ctx.scrollbarStyle,
  240. always: _ctx.scrollbarAlwaysOn
  241. }, {
  242. default: withCtx(() => [
  243. createElementVNode("table", {
  244. ref: "tableBody",
  245. class: normalizeClass(_ctx.ns.e("body")),
  246. cellspacing: "0",
  247. cellpadding: "0",
  248. border: "0",
  249. style: normalizeStyle({
  250. width: _ctx.bodyWidth,
  251. tableLayout: _ctx.tableLayout
  252. })
  253. }, [
  254. createVNode(_component_hColgroup, {
  255. columns: _ctx.store.states.columns.value,
  256. "table-layout": _ctx.tableLayout
  257. }, null, 8, ["columns", "table-layout"]),
  258. _ctx.showHeader && _ctx.tableLayout === "auto" ? (openBlock(), createBlock(_component_table_header, {
  259. key: 0,
  260. ref: "tableHeaderRef",
  261. border: _ctx.border,
  262. "default-sort": _ctx.defaultSort,
  263. store: _ctx.store,
  264. onSetDragVisible: _ctx.setDragVisible
  265. }, null, 8, ["border", "default-sort", "store", "onSetDragVisible"])) : createCommentVNode("v-if", true),
  266. createVNode(_component_table_body, {
  267. context: _ctx.context,
  268. highlight: _ctx.highlightCurrentRow,
  269. "row-class-name": _ctx.rowClassName,
  270. "tooltip-effect": _ctx.tooltipEffect,
  271. "row-style": _ctx.rowStyle,
  272. store: _ctx.store,
  273. stripe: _ctx.stripe
  274. }, null, 8, ["context", "highlight", "row-class-name", "tooltip-effect", "row-style", "store", "stripe"])
  275. ], 6),
  276. _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
  277. key: 0,
  278. ref: "emptyBlock",
  279. style: normalizeStyle(_ctx.emptyBlockStyle),
  280. class: normalizeClass(_ctx.ns.e("empty-block"))
  281. }, [
  282. createElementVNode("span", {
  283. class: normalizeClass(_ctx.ns.e("empty-text"))
  284. }, [
  285. renderSlot(_ctx.$slots, "empty", {}, () => [
  286. createTextVNode(toDisplayString(_ctx.computedEmptyText), 1)
  287. ])
  288. ], 2)
  289. ], 6)) : createCommentVNode("v-if", true),
  290. _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
  291. key: 1,
  292. ref: "appendWrapper",
  293. class: normalizeClass(_ctx.ns.e("append-wrapper"))
  294. }, [
  295. renderSlot(_ctx.$slots, "append")
  296. ], 2)) : createCommentVNode("v-if", true)
  297. ]),
  298. _: 3
  299. }, 8, ["view-style", "wrap-style", "always"])
  300. ], 2),
  301. _ctx.showSummary ? withDirectives((openBlock(), createElementBlock("div", {
  302. key: 1,
  303. ref: "footerWrapper",
  304. class: normalizeClass(_ctx.ns.e("footer-wrapper"))
  305. }, [
  306. createVNode(_component_table_footer, {
  307. border: _ctx.border,
  308. "default-sort": _ctx.defaultSort,
  309. store: _ctx.store,
  310. style: normalizeStyle(_ctx.tableBodyStyles),
  311. "sum-text": _ctx.computedSumText,
  312. "summary-method": _ctx.summaryMethod
  313. }, null, 8, ["border", "default-sort", "store", "style", "sum-text", "summary-method"])
  314. ], 2)), [
  315. [vShow, !_ctx.isEmpty],
  316. [_directive_mousewheel, _ctx.handleHeaderFooterMousewheel]
  317. ]) : createCommentVNode("v-if", true),
  318. _ctx.border || _ctx.isGroup ? (openBlock(), createElementBlock("div", {
  319. key: 2,
  320. class: normalizeClass(_ctx.ns.e("border-left-patch"))
  321. }, null, 2)) : createCommentVNode("v-if", true)
  322. ], 6),
  323. withDirectives(createElementVNode("div", {
  324. ref: "resizeProxy",
  325. class: normalizeClass(_ctx.ns.e("column-resize-proxy"))
  326. }, null, 2), [
  327. [vShow, _ctx.resizeProxyVisible]
  328. ])
  329. ], 46, _hoisted_1);
  330. }
  331. var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/table/src/table.vue"]]);
  332. export { Table as default };
  333. //# sourceMappingURL=table.mjs.map