bf7a2904d3682c3f2707d28dea9b680d0db1b024f29727fc9e2d7c267dc3e56c8a0b7e8aa9ba43d6de9854680aaf0bf3ff9ced43f622e402e7bdf21b69b4f3 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. import { inject, computed, h } from 'vue';
  2. import { merge } from 'lodash-unified';
  3. import { getRowIdentity } from '../util.mjs';
  4. import { TABLE_INJECTION_KEY } from '../tokens.mjs';
  5. import useEvents from './events-helper.mjs';
  6. import useStyles from './styles-helper.mjs';
  7. import TdWrapper from './td-wrapper.mjs';
  8. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  9. import { isBoolean, isPropAbsent } from '../../../../utils/types.mjs';
  10. function useRender(props) {
  11. const parent = inject(TABLE_INJECTION_KEY);
  12. const ns = useNamespace("table");
  13. const {
  14. handleDoubleClick,
  15. handleClick,
  16. handleContextMenu,
  17. handleMouseEnter,
  18. handleMouseLeave,
  19. handleCellMouseEnter,
  20. handleCellMouseLeave,
  21. tooltipContent,
  22. tooltipTrigger
  23. } = useEvents(props);
  24. const {
  25. getRowStyle,
  26. getRowClass,
  27. getCellStyle,
  28. getCellClass,
  29. getSpan,
  30. getColspanRealWidth
  31. } = useStyles(props);
  32. let displayIndex = -1;
  33. const firstDefaultColumnIndex = computed(() => {
  34. var _a;
  35. return (_a = props.store) == null ? void 0 : _a.states.columns.value.findIndex(({ type }) => type === "default");
  36. });
  37. const getKeyOfRow = (row, index) => {
  38. var _a;
  39. const rowKey = (_a = parent == null ? void 0 : parent.props) == null ? void 0 : _a.rowKey;
  40. if (rowKey) {
  41. return getRowIdentity(row, rowKey);
  42. }
  43. return index;
  44. };
  45. const rowRender = (row, $index, treeRowData, expanded = false) => {
  46. const { tooltipEffect, tooltipOptions, store } = props;
  47. const { indent, columns } = store.states;
  48. const rowClasses = [];
  49. let display = true;
  50. if (treeRowData) {
  51. rowClasses.push(ns.em("row", `level-${treeRowData.level}`));
  52. display = !!treeRowData.display;
  53. }
  54. if ($index === 0) {
  55. displayIndex = -1;
  56. }
  57. if (props.stripe && display) {
  58. displayIndex++;
  59. }
  60. rowClasses.push(...getRowClass(row, $index, displayIndex));
  61. const displayStyle = display ? null : { display: "none" };
  62. return h("tr", {
  63. style: [displayStyle, getRowStyle(row, $index)],
  64. class: rowClasses,
  65. key: getKeyOfRow(row, $index),
  66. onDblclick: ($event) => handleDoubleClick($event, row),
  67. onClick: ($event) => handleClick($event, row),
  68. onContextmenu: ($event) => handleContextMenu($event, row),
  69. onMouseenter: () => handleMouseEnter($index),
  70. onMouseleave: handleMouseLeave
  71. }, columns.value.map((column, cellIndex) => {
  72. const { rowspan, colspan } = getSpan(row, column, $index, cellIndex);
  73. if (!rowspan || !colspan) {
  74. return null;
  75. }
  76. const columnData = Object.assign({}, column);
  77. columnData.realWidth = getColspanRealWidth(columns.value, colspan, cellIndex);
  78. const data = {
  79. store,
  80. _self: props.context || parent,
  81. column: columnData,
  82. row,
  83. $index,
  84. cellIndex,
  85. expanded
  86. };
  87. if (cellIndex === firstDefaultColumnIndex.value && treeRowData) {
  88. data.treeNode = {
  89. indent: treeRowData.level && treeRowData.level * indent.value,
  90. level: treeRowData.level
  91. };
  92. if (isBoolean(treeRowData.expanded)) {
  93. data.treeNode.expanded = treeRowData.expanded;
  94. if ("loading" in treeRowData) {
  95. data.treeNode.loading = treeRowData.loading;
  96. }
  97. if ("noLazyChildren" in treeRowData) {
  98. data.treeNode.noLazyChildren = treeRowData.noLazyChildren;
  99. }
  100. }
  101. }
  102. const baseKey = `${getKeyOfRow(row, $index)},${cellIndex}`;
  103. const patchKey = columnData.columnKey || columnData.rawColumnKey || "";
  104. const mergedTooltipOptions = column.showOverflowTooltip && merge({
  105. effect: tooltipEffect
  106. }, tooltipOptions, column.showOverflowTooltip);
  107. return h(TdWrapper, {
  108. style: getCellStyle($index, cellIndex, row, column),
  109. class: getCellClass($index, cellIndex, row, column, colspan - 1),
  110. key: `${patchKey}${baseKey}`,
  111. rowspan,
  112. colspan,
  113. onMouseenter: ($event) => handleCellMouseEnter($event, row, mergedTooltipOptions),
  114. onMouseleave: handleCellMouseLeave
  115. }, {
  116. default: () => cellChildren(cellIndex, column, data)
  117. });
  118. }));
  119. };
  120. const cellChildren = (_cellIndex, column, data) => {
  121. return column.renderCell(data);
  122. };
  123. const wrappedRowRender = (row, $index) => {
  124. const store = props.store;
  125. const { isRowExpanded, assertRowKey } = store;
  126. const { treeData, lazyTreeNodeMap, childrenColumnName, rowKey } = store.states;
  127. const columns = store.states.columns.value;
  128. const hasExpandColumn = columns.some(({ type }) => type === "expand");
  129. if (hasExpandColumn) {
  130. const expanded = isRowExpanded(row);
  131. const tr = rowRender(row, $index, void 0, expanded);
  132. const renderExpanded = parent == null ? void 0 : parent.renderExpanded;
  133. if (!renderExpanded) {
  134. console.error("[Element Error]renderExpanded is required.");
  135. return tr;
  136. }
  137. const rows = [[tr]];
  138. if (parent.props.preserveExpandedContent || expanded) {
  139. rows[0].push(h("tr", {
  140. key: `expanded-row__${tr.key}`,
  141. style: { display: expanded ? "" : "none" }
  142. }, [
  143. h("td", {
  144. colspan: columns.length,
  145. class: `${ns.e("cell")} ${ns.e("expanded-cell")}`
  146. }, [renderExpanded({ row, $index, store, expanded })])
  147. ]));
  148. }
  149. return rows;
  150. } else if (Object.keys(treeData.value).length) {
  151. assertRowKey();
  152. const key = getRowIdentity(row, rowKey.value);
  153. let cur = treeData.value[key];
  154. let treeRowData = null;
  155. if (cur) {
  156. treeRowData = {
  157. expanded: cur.expanded,
  158. level: cur.level,
  159. display: true,
  160. noLazyChildren: void 0,
  161. loading: void 0
  162. };
  163. if (isBoolean(cur.lazy)) {
  164. if (treeRowData && isBoolean(cur.loaded) && cur.loaded) {
  165. treeRowData.noLazyChildren = !(cur.children && cur.children.length);
  166. }
  167. treeRowData.loading = cur.loading;
  168. }
  169. }
  170. const tmp = [rowRender(row, $index, treeRowData != null ? treeRowData : void 0)];
  171. if (cur) {
  172. let i = 0;
  173. const traverse = (children, parent2) => {
  174. if (!(children && children.length && parent2))
  175. return;
  176. children.forEach((node) => {
  177. const innerTreeRowData = {
  178. display: parent2.display && parent2.expanded,
  179. level: parent2.level + 1,
  180. expanded: false,
  181. noLazyChildren: false,
  182. loading: false
  183. };
  184. const childKey = getRowIdentity(node, rowKey.value);
  185. if (isPropAbsent(childKey)) {
  186. throw new Error("For nested data item, row-key is required.");
  187. }
  188. cur = { ...treeData.value[childKey] };
  189. if (cur) {
  190. innerTreeRowData.expanded = cur.expanded;
  191. cur.level = cur.level || innerTreeRowData.level;
  192. cur.display = !!(cur.expanded && innerTreeRowData.display);
  193. if (isBoolean(cur.lazy)) {
  194. if (isBoolean(cur.loaded) && cur.loaded) {
  195. innerTreeRowData.noLazyChildren = !(cur.children && cur.children.length);
  196. }
  197. innerTreeRowData.loading = cur.loading;
  198. }
  199. }
  200. i++;
  201. tmp.push(rowRender(node, $index + i, innerTreeRowData));
  202. if (cur) {
  203. const nodes2 = lazyTreeNodeMap.value[childKey] || node[childrenColumnName.value];
  204. traverse(nodes2, cur);
  205. }
  206. });
  207. };
  208. cur.display = true;
  209. const nodes = lazyTreeNodeMap.value[key] || row[childrenColumnName.value];
  210. traverse(nodes, cur);
  211. }
  212. return tmp;
  213. } else {
  214. return rowRender(row, $index, void 0);
  215. }
  216. };
  217. return {
  218. wrappedRowRender,
  219. tooltipContent,
  220. tooltipTrigger
  221. };
  222. }
  223. export { useRender as default };
  224. //# sourceMappingURL=render-helper.mjs.map