faa7218baae1caa3eaf24c50c429a6bda99fa08f7958e7558c28c263062849d2575e8e1922aefcfc5b6184e8dc25d16389213ec43c350a0be2be653ad6b10e 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var tokens = require('./tokens.js');
  5. var grid = require('./grid.js');
  6. var utils = require('./utils.js');
  7. var header = require('./components/header.js');
  8. var dynamicSizeGrid = require('../../virtual-list/src/components/dynamic-size-grid.js');
  9. var fixedSizeGrid = require('../../virtual-list/src/components/fixed-size-grid.js');
  10. var shared = require('@vue/shared');
  11. var types = require('../../../utils/types.js');
  12. const COMPONENT_NAME = "ElTableV2Grid";
  13. const useTableGrid = (props) => {
  14. const headerRef = vue.ref();
  15. const bodyRef = vue.ref();
  16. const scrollLeft = vue.ref(0);
  17. const totalHeight = vue.computed(() => {
  18. const {
  19. data,
  20. rowHeight,
  21. estimatedRowHeight
  22. } = props;
  23. if (estimatedRowHeight) {
  24. return;
  25. }
  26. return data.length * rowHeight;
  27. });
  28. const fixedRowHeight = vue.computed(() => {
  29. const {
  30. fixedData,
  31. rowHeight
  32. } = props;
  33. return ((fixedData == null ? void 0 : fixedData.length) || 0) * rowHeight;
  34. });
  35. const headerHeight = vue.computed(() => utils.sum(props.headerHeight));
  36. const gridHeight = vue.computed(() => {
  37. const {
  38. height
  39. } = props;
  40. return Math.max(0, height - vue.unref(headerHeight) - vue.unref(fixedRowHeight));
  41. });
  42. const hasHeader = vue.computed(() => {
  43. return vue.unref(headerHeight) + vue.unref(fixedRowHeight) > 0;
  44. });
  45. const itemKey = ({
  46. data,
  47. rowIndex
  48. }) => data[rowIndex][props.rowKey];
  49. function onItemRendered({
  50. rowCacheStart,
  51. rowCacheEnd,
  52. rowVisibleStart,
  53. rowVisibleEnd
  54. }) {
  55. var _a;
  56. (_a = props.onRowsRendered) == null ? void 0 : _a.call(props, {
  57. rowCacheStart,
  58. rowCacheEnd,
  59. rowVisibleStart,
  60. rowVisibleEnd
  61. });
  62. }
  63. function resetAfterRowIndex(index, forceUpdate2) {
  64. var _a;
  65. (_a = bodyRef.value) == null ? void 0 : _a.resetAfterRowIndex(index, forceUpdate2);
  66. }
  67. function scrollTo(leftOrOptions, top) {
  68. const header$ = vue.unref(headerRef);
  69. const body$ = vue.unref(bodyRef);
  70. if (shared.isObject(leftOrOptions)) {
  71. header$ == null ? void 0 : header$.scrollToLeft(leftOrOptions.scrollLeft);
  72. scrollLeft.value = leftOrOptions.scrollLeft;
  73. body$ == null ? void 0 : body$.scrollTo(leftOrOptions);
  74. } else {
  75. header$ == null ? void 0 : header$.scrollToLeft(leftOrOptions);
  76. scrollLeft.value = leftOrOptions;
  77. body$ == null ? void 0 : body$.scrollTo({
  78. scrollLeft: leftOrOptions,
  79. scrollTop: top
  80. });
  81. }
  82. }
  83. function scrollToTop(scrollTop) {
  84. var _a;
  85. (_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollTo({
  86. scrollTop
  87. });
  88. }
  89. function scrollToRow(row, strategy) {
  90. var _a;
  91. (_a = vue.unref(bodyRef)) == null ? void 0 : _a.scrollToItem(row, 1, strategy);
  92. }
  93. function forceUpdate() {
  94. var _a, _b;
  95. (_a = vue.unref(bodyRef)) == null ? void 0 : _a.$forceUpdate();
  96. (_b = vue.unref(headerRef)) == null ? void 0 : _b.$forceUpdate();
  97. }
  98. vue.watch(() => props.bodyWidth, () => {
  99. var _a;
  100. if (types.isNumber(props.estimatedRowHeight))
  101. (_a = bodyRef.value) == null ? void 0 : _a.resetAfter({
  102. columnIndex: 0
  103. }, false);
  104. });
  105. return {
  106. bodyRef,
  107. forceUpdate,
  108. fixedRowHeight,
  109. gridHeight,
  110. hasHeader,
  111. headerHeight,
  112. headerRef,
  113. totalHeight,
  114. itemKey,
  115. onItemRendered,
  116. resetAfterRowIndex,
  117. scrollTo,
  118. scrollToTop,
  119. scrollToRow,
  120. scrollLeft
  121. };
  122. };
  123. const TableGrid = vue.defineComponent({
  124. name: COMPONENT_NAME,
  125. props: grid.tableV2GridProps,
  126. setup(props, {
  127. slots,
  128. expose
  129. }) {
  130. const {
  131. ns
  132. } = vue.inject(tokens.TableV2InjectionKey);
  133. const {
  134. bodyRef,
  135. fixedRowHeight,
  136. gridHeight,
  137. hasHeader,
  138. headerRef,
  139. headerHeight,
  140. totalHeight,
  141. forceUpdate,
  142. itemKey,
  143. onItemRendered,
  144. resetAfterRowIndex,
  145. scrollTo,
  146. scrollToTop,
  147. scrollToRow,
  148. scrollLeft
  149. } = useTableGrid(props);
  150. vue.provide(tokens.TABLE_V2_GRID_INJECTION_KEY, scrollLeft);
  151. vue.onActivated(async () => {
  152. var _a;
  153. await vue.nextTick();
  154. const scrollTop = (_a = bodyRef.value) == null ? void 0 : _a.states.scrollTop;
  155. scrollTop && scrollToTop(Math.round(scrollTop) + 1);
  156. });
  157. expose({
  158. forceUpdate,
  159. totalHeight,
  160. scrollTo,
  161. scrollToTop,
  162. scrollToRow,
  163. resetAfterRowIndex
  164. });
  165. const getColumnWidth = () => props.bodyWidth;
  166. return () => {
  167. const {
  168. cache,
  169. columns,
  170. data,
  171. fixedData,
  172. useIsScrolling,
  173. scrollbarAlwaysOn,
  174. scrollbarEndGap,
  175. scrollbarStartGap,
  176. style,
  177. rowHeight,
  178. bodyWidth,
  179. estimatedRowHeight,
  180. headerWidth,
  181. height,
  182. width,
  183. getRowHeight,
  184. onScroll
  185. } = props;
  186. const isDynamicRowEnabled = types.isNumber(estimatedRowHeight);
  187. const Grid = isDynamicRowEnabled ? dynamicSizeGrid["default"] : fixedSizeGrid["default"];
  188. const _headerHeight = vue.unref(headerHeight);
  189. return vue.createVNode("div", {
  190. "role": "table",
  191. "class": [ns.e("table"), props.class],
  192. "style": style
  193. }, [vue.createVNode(Grid, {
  194. "ref": bodyRef,
  195. "data": data,
  196. "useIsScrolling": useIsScrolling,
  197. "itemKey": itemKey,
  198. "columnCache": 0,
  199. "columnWidth": isDynamicRowEnabled ? getColumnWidth : bodyWidth,
  200. "totalColumn": 1,
  201. "totalRow": data.length,
  202. "rowCache": cache,
  203. "rowHeight": isDynamicRowEnabled ? getRowHeight : rowHeight,
  204. "width": width,
  205. "height": vue.unref(gridHeight),
  206. "class": ns.e("body"),
  207. "role": "rowgroup",
  208. "scrollbarStartGap": scrollbarStartGap,
  209. "scrollbarEndGap": scrollbarEndGap,
  210. "scrollbarAlwaysOn": scrollbarAlwaysOn,
  211. "onScroll": onScroll,
  212. "onItemRendered": onItemRendered,
  213. "perfMode": false
  214. }, {
  215. default: (params) => {
  216. var _a;
  217. const rowData = data[params.rowIndex];
  218. return (_a = slots.row) == null ? void 0 : _a.call(slots, {
  219. ...params,
  220. columns,
  221. rowData
  222. });
  223. }
  224. }), vue.unref(hasHeader) && vue.createVNode(header["default"], {
  225. "ref": headerRef,
  226. "class": ns.e("header-wrapper"),
  227. "columns": columns,
  228. "headerData": data,
  229. "headerHeight": props.headerHeight,
  230. "fixedHeaderData": fixedData,
  231. "rowWidth": headerWidth,
  232. "rowHeight": rowHeight,
  233. "width": width,
  234. "height": Math.min(_headerHeight + vue.unref(fixedRowHeight), height)
  235. }, {
  236. dynamic: slots.header,
  237. fixed: slots.row
  238. })]);
  239. };
  240. }
  241. });
  242. var Table = TableGrid;
  243. exports["default"] = Table;
  244. //# sourceMappingURL=table-grid.js.map