index.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import { createVNode as _createVNode } from "vue";
  2. import ExpandedRow from './ExpandedRow';
  3. import { getColumnsKey } from '../utils/valueUtil';
  4. import MeasureCell from './MeasureCell';
  5. import BodyRow from './BodyRow';
  6. import useFlattenRecords from '../hooks/useFlattenRecords';
  7. import { defineComponent, shallowRef, toRef } from 'vue';
  8. import { useInjectResize } from '../context/ResizeContext';
  9. import { useInjectTable } from '../context/TableContext';
  10. import { useInjectBody } from '../context/BodyContext';
  11. import { useProvideHover } from '../context/HoverContext';
  12. export default defineComponent({
  13. name: 'TableBody',
  14. props: ['data', 'getRowKey', 'measureColumnWidth', 'expandedKeys', 'customRow', 'rowExpandable', 'childrenColumnName'],
  15. setup(props, _ref) {
  16. let {
  17. slots
  18. } = _ref;
  19. const resizeContext = useInjectResize();
  20. const tableContext = useInjectTable();
  21. const bodyContext = useInjectBody();
  22. const flattenData = useFlattenRecords(toRef(props, 'data'), toRef(props, 'childrenColumnName'), toRef(props, 'expandedKeys'), toRef(props, 'getRowKey'));
  23. const startRow = shallowRef(-1);
  24. const endRow = shallowRef(-1);
  25. let timeoutId;
  26. useProvideHover({
  27. startRow,
  28. endRow,
  29. onHover: (start, end) => {
  30. clearTimeout(timeoutId);
  31. timeoutId = setTimeout(() => {
  32. startRow.value = start;
  33. endRow.value = end;
  34. }, 100);
  35. }
  36. });
  37. return () => {
  38. var _a;
  39. const {
  40. data,
  41. getRowKey,
  42. measureColumnWidth,
  43. expandedKeys,
  44. customRow,
  45. rowExpandable,
  46. childrenColumnName
  47. } = props;
  48. const {
  49. onColumnResize
  50. } = resizeContext;
  51. const {
  52. prefixCls,
  53. getComponent
  54. } = tableContext;
  55. const {
  56. flattenColumns
  57. } = bodyContext;
  58. const WrapperComponent = getComponent(['body', 'wrapper'], 'tbody');
  59. const trComponent = getComponent(['body', 'row'], 'tr');
  60. const tdComponent = getComponent(['body', 'cell'], 'td');
  61. let rows;
  62. if (data.length) {
  63. rows = flattenData.value.map((item, idx) => {
  64. const {
  65. record,
  66. indent,
  67. index: renderIndex
  68. } = item;
  69. const key = getRowKey(record, idx);
  70. return _createVNode(BodyRow, {
  71. "key": key,
  72. "rowKey": key,
  73. "record": record,
  74. "recordKey": key,
  75. "index": idx,
  76. "renderIndex": renderIndex,
  77. "rowComponent": trComponent,
  78. "cellComponent": tdComponent,
  79. "expandedKeys": expandedKeys,
  80. "customRow": customRow,
  81. "getRowKey": getRowKey,
  82. "rowExpandable": rowExpandable,
  83. "childrenColumnName": childrenColumnName,
  84. "indent": indent
  85. }, null);
  86. });
  87. } else {
  88. rows = _createVNode(ExpandedRow, {
  89. "expanded": true,
  90. "class": `${prefixCls}-placeholder`,
  91. "prefixCls": prefixCls,
  92. "component": trComponent,
  93. "cellComponent": tdComponent,
  94. "colSpan": flattenColumns.length,
  95. "isEmpty": true
  96. }, {
  97. default: () => [(_a = slots.emptyNode) === null || _a === void 0 ? void 0 : _a.call(slots)]
  98. });
  99. }
  100. const columnsKey = getColumnsKey(flattenColumns);
  101. return _createVNode(WrapperComponent, {
  102. "class": `${prefixCls}-tbody`
  103. }, {
  104. default: () => [measureColumnWidth && _createVNode("tr", {
  105. "aria-hidden": "true",
  106. "class": `${prefixCls}-measure-row`,
  107. "style": {
  108. height: 0,
  109. fontSize: 0
  110. }
  111. }, [columnsKey.map(columnKey => _createVNode(MeasureCell, {
  112. "key": columnKey,
  113. "columnKey": columnKey,
  114. "onColumnResize": onColumnResize
  115. }, null))]), rows]
  116. });
  117. };
  118. }
  119. });