f86c2bb00709376b5635c009fb1e857bee19f8583ead7945bdefc184c5ad6c35ebea89d688f11700ba3622ff87f541ef95697f4e8a69fa6fa8253a5b479878 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import { defineComponent, unref, createVNode, mergeProps, inject, ref, computed, onMounted, nextTick } from 'vue';
  2. import { tableV2RowProps } from '../row.mjs';
  3. import { TableV2InjectionKey } from '../tokens.mjs';
  4. import { placeholderSign } from '../private.mjs';
  5. import { isArray, isFunction } from '@vue/shared';
  6. import { isNumber } from '../../../../utils/types.mjs';
  7. const useTableRow = (props) => {
  8. const {
  9. isScrolling
  10. } = inject(TableV2InjectionKey);
  11. const measured = ref(false);
  12. const rowRef = ref();
  13. const measurable = computed(() => {
  14. return isNumber(props.estimatedRowHeight) && props.rowIndex >= 0;
  15. });
  16. const doMeasure = (isInit = false) => {
  17. const $rowRef = unref(rowRef);
  18. if (!$rowRef)
  19. return;
  20. const {
  21. columns,
  22. onRowHeightChange,
  23. rowKey,
  24. rowIndex,
  25. style
  26. } = props;
  27. const {
  28. height
  29. } = $rowRef.getBoundingClientRect();
  30. measured.value = true;
  31. nextTick(() => {
  32. if (isInit || height !== Number.parseInt(style.height)) {
  33. const firstColumn = columns[0];
  34. const isPlaceholder = (firstColumn == null ? void 0 : firstColumn.placeholderSign) === placeholderSign;
  35. onRowHeightChange == null ? void 0 : onRowHeightChange({
  36. rowKey,
  37. height,
  38. rowIndex
  39. }, firstColumn && !isPlaceholder && firstColumn.fixed);
  40. }
  41. });
  42. };
  43. const eventHandlers = computed(() => {
  44. const {
  45. rowData,
  46. rowIndex,
  47. rowKey,
  48. onRowHover
  49. } = props;
  50. const handlers = props.rowEventHandlers || {};
  51. const eventHandlers2 = {};
  52. Object.entries(handlers).forEach(([eventName, handler]) => {
  53. if (isFunction(handler)) {
  54. eventHandlers2[eventName] = (event) => {
  55. handler({
  56. event,
  57. rowData,
  58. rowIndex,
  59. rowKey
  60. });
  61. };
  62. }
  63. });
  64. if (onRowHover) {
  65. [{
  66. name: "onMouseleave",
  67. hovered: false
  68. }, {
  69. name: "onMouseenter",
  70. hovered: true
  71. }].forEach(({
  72. name,
  73. hovered
  74. }) => {
  75. const existedHandler = eventHandlers2[name];
  76. eventHandlers2[name] = (event) => {
  77. onRowHover({
  78. event,
  79. hovered,
  80. rowData,
  81. rowIndex,
  82. rowKey
  83. });
  84. existedHandler == null ? void 0 : existedHandler(event);
  85. };
  86. });
  87. }
  88. return eventHandlers2;
  89. });
  90. const onExpand = (expanded) => {
  91. const {
  92. onRowExpand,
  93. rowData,
  94. rowIndex,
  95. rowKey
  96. } = props;
  97. onRowExpand == null ? void 0 : onRowExpand({
  98. expanded,
  99. rowData,
  100. rowIndex,
  101. rowKey
  102. });
  103. };
  104. onMounted(() => {
  105. if (unref(measurable)) {
  106. doMeasure(true);
  107. }
  108. });
  109. return {
  110. isScrolling,
  111. measurable,
  112. measured,
  113. rowRef,
  114. eventHandlers,
  115. onExpand
  116. };
  117. };
  118. const COMPONENT_NAME = "ElTableV2TableRow";
  119. const TableV2Row = defineComponent({
  120. name: COMPONENT_NAME,
  121. props: tableV2RowProps,
  122. setup(props, {
  123. expose,
  124. slots,
  125. attrs
  126. }) {
  127. const {
  128. eventHandlers,
  129. isScrolling,
  130. measurable,
  131. measured,
  132. rowRef,
  133. onExpand
  134. } = useTableRow(props);
  135. expose({
  136. onExpand
  137. });
  138. return () => {
  139. const {
  140. columns,
  141. columnsStyles,
  142. expandColumnKey,
  143. depth,
  144. rowData,
  145. rowIndex,
  146. style
  147. } = props;
  148. let ColumnCells = columns.map((column, columnIndex) => {
  149. const expandable = isArray(rowData.children) && rowData.children.length > 0 && column.key === expandColumnKey;
  150. return slots.cell({
  151. column,
  152. columns,
  153. columnIndex,
  154. depth,
  155. style: columnsStyles[column.key],
  156. rowData,
  157. rowIndex,
  158. isScrolling: unref(isScrolling),
  159. expandIconProps: expandable ? {
  160. rowData,
  161. rowIndex,
  162. onExpand
  163. } : void 0
  164. });
  165. });
  166. if (slots.row) {
  167. ColumnCells = slots.row({
  168. cells: ColumnCells.map((node) => {
  169. if (isArray(node) && node.length === 1) {
  170. return node[0];
  171. }
  172. return node;
  173. }),
  174. style,
  175. columns,
  176. depth,
  177. rowData,
  178. rowIndex,
  179. isScrolling: unref(isScrolling)
  180. });
  181. }
  182. if (unref(measurable)) {
  183. const {
  184. height,
  185. ...exceptHeightStyle
  186. } = style || {};
  187. const _measured = unref(measured);
  188. return createVNode("div", mergeProps({
  189. "ref": rowRef,
  190. "class": props.class,
  191. "style": _measured ? style : exceptHeightStyle,
  192. "role": "row"
  193. }, attrs, unref(eventHandlers)), [ColumnCells]);
  194. }
  195. return createVNode("div", mergeProps(attrs, {
  196. "ref": rowRef,
  197. "class": props.class,
  198. "style": style,
  199. "role": "row"
  200. }, unref(eventHandlers)), [ColumnCells]);
  201. };
  202. }
  203. });
  204. var Row = TableV2Row;
  205. export { Row as default };
  206. //# sourceMappingURL=row.mjs.map