16995b32f92e5408e43bfc02dc8c75da01e08c1bfaca2aacc62d9d8534994ed723a6feb4ab9abf1c49a029fca6cbb4f37ecc75f16795dd4b2e5bf486b047e6 6.7 KB

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