index.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import { defineComponent, getCurrentInstance, inject, watch, onUnmounted, h } from 'vue';
  2. import useLayoutObserver from '../layout-observer.mjs';
  3. import { removePopper } from '../util.mjs';
  4. import { TABLE_INJECTION_KEY } from '../tokens.mjs';
  5. import useRender from './render-helper.mjs';
  6. import defaultProps from './defaults.mjs';
  7. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  8. import { addClass, removeClass } from '../../../../utils/dom/style.mjs';
  9. import { isClient } from '@vueuse/core';
  10. import { rAF } from '../../../../utils/raf.mjs';
  11. var TableBody = defineComponent({
  12. name: "ElTableBody",
  13. props: defaultProps,
  14. setup(props) {
  15. const instance = getCurrentInstance();
  16. const parent = inject(TABLE_INJECTION_KEY);
  17. const ns = useNamespace("table");
  18. const { wrappedRowRender, tooltipContent, tooltipTrigger } = useRender(props);
  19. const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent);
  20. const hoveredCellList = [];
  21. watch(props.store.states.hoverRow, (newVal, oldVal) => {
  22. var _a;
  23. const el = instance == null ? void 0 : instance.vnode.el;
  24. const rows = Array.from((el == null ? void 0 : el.children) || []).filter((e) => e == null ? void 0 : e.classList.contains(`${ns.e("row")}`));
  25. let rowNum = newVal;
  26. const childNodes = (_a = rows[rowNum]) == null ? void 0 : _a.childNodes;
  27. if (childNodes == null ? void 0 : childNodes.length) {
  28. let control = 0;
  29. const indexes = Array.from(childNodes).reduce((acc, item, index) => {
  30. var _a2, _b;
  31. if (((_a2 = childNodes[index]) == null ? void 0 : _a2.colSpan) > 1) {
  32. control = (_b = childNodes[index]) == null ? void 0 : _b.colSpan;
  33. }
  34. if (item.nodeName !== "TD" && control === 0) {
  35. acc.push(index);
  36. }
  37. control > 0 && control--;
  38. return acc;
  39. }, []);
  40. indexes.forEach((rowIndex) => {
  41. var _a2;
  42. rowNum = newVal;
  43. while (rowNum > 0) {
  44. const preChildNodes = (_a2 = rows[rowNum - 1]) == null ? void 0 : _a2.childNodes;
  45. if (preChildNodes[rowIndex] && preChildNodes[rowIndex].nodeName === "TD" && preChildNodes[rowIndex].rowSpan > 1) {
  46. addClass(preChildNodes[rowIndex], "hover-cell");
  47. hoveredCellList.push(preChildNodes[rowIndex]);
  48. break;
  49. }
  50. rowNum--;
  51. }
  52. });
  53. } else {
  54. hoveredCellList.forEach((item) => removeClass(item, "hover-cell"));
  55. hoveredCellList.length = 0;
  56. }
  57. if (!props.store.states.isComplex.value || !isClient)
  58. return;
  59. rAF(() => {
  60. const oldRow = rows[oldVal];
  61. const newRow = rows[newVal];
  62. if (oldRow && !oldRow.classList.contains("hover-fixed-row")) {
  63. removeClass(oldRow, "hover-row");
  64. }
  65. if (newRow) {
  66. addClass(newRow, "hover-row");
  67. }
  68. });
  69. });
  70. onUnmounted(() => {
  71. var _a;
  72. (_a = removePopper) == null ? void 0 : _a();
  73. });
  74. return {
  75. ns,
  76. onColumnsChange,
  77. onScrollableChange,
  78. wrappedRowRender,
  79. tooltipContent,
  80. tooltipTrigger
  81. };
  82. },
  83. render() {
  84. const { wrappedRowRender, store } = this;
  85. const data = store.states.data.value || [];
  86. return h("tbody", { tabIndex: -1 }, [
  87. data.reduce((acc, row) => {
  88. return acc.concat(wrappedRowRender(row, acc.length));
  89. }, [])
  90. ]);
  91. }
  92. });
  93. export { TableBody as default };
  94. //# sourceMappingURL=index.mjs.map