9beaf00a061b0c74a5d4bc5ffe2494ddd5079aa713428c9cb0af85e387b782142d7641ffcdf3d6f78f865972cf559392378a7fbe31db15503785a0bf24c390 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import { defineComponent, inject, ref, computed, unref, onUpdated, createVNode, nextTick } from 'vue';
  2. import { tableV2HeaderProps } from '../header.mjs';
  3. import { enforceUnit } from '../utils.mjs';
  4. import { TABLE_V2_GRID_INJECTION_KEY } from '../tokens.mjs';
  5. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  6. import { castArray } from 'lodash-unified';
  7. const COMPONENT_NAME = "ElTableV2Header";
  8. const TableV2Header = defineComponent({
  9. name: COMPONENT_NAME,
  10. props: tableV2HeaderProps,
  11. setup(props, {
  12. slots,
  13. expose
  14. }) {
  15. const ns = useNamespace("table-v2");
  16. const scrollLeftInfo = inject(TABLE_V2_GRID_INJECTION_KEY);
  17. const headerRef = ref();
  18. const headerStyle = computed(() => enforceUnit({
  19. width: props.width,
  20. height: props.height
  21. }));
  22. const rowStyle = computed(() => enforceUnit({
  23. width: props.rowWidth,
  24. height: props.height
  25. }));
  26. const headerHeights = computed(() => castArray(unref(props.headerHeight)));
  27. const scrollToLeft = (left) => {
  28. const headerEl = unref(headerRef);
  29. nextTick(() => {
  30. (headerEl == null ? void 0 : headerEl.scroll) && headerEl.scroll({
  31. left
  32. });
  33. });
  34. };
  35. const renderFixedRows = () => {
  36. const fixedRowClassName = ns.e("fixed-header-row");
  37. const {
  38. columns,
  39. fixedHeaderData,
  40. rowHeight
  41. } = props;
  42. return fixedHeaderData == null ? void 0 : fixedHeaderData.map((fixedRowData, fixedRowIndex) => {
  43. var _a;
  44. const style = enforceUnit({
  45. height: rowHeight,
  46. width: "100%"
  47. });
  48. return (_a = slots.fixed) == null ? void 0 : _a.call(slots, {
  49. class: fixedRowClassName,
  50. columns,
  51. rowData: fixedRowData,
  52. rowIndex: -(fixedRowIndex + 1),
  53. style
  54. });
  55. });
  56. };
  57. const renderDynamicRows = () => {
  58. const dynamicRowClassName = ns.e("dynamic-header-row");
  59. const {
  60. columns
  61. } = props;
  62. return unref(headerHeights).map((rowHeight, rowIndex) => {
  63. var _a;
  64. const style = enforceUnit({
  65. width: "100%",
  66. height: rowHeight
  67. });
  68. return (_a = slots.dynamic) == null ? void 0 : _a.call(slots, {
  69. class: dynamicRowClassName,
  70. columns,
  71. headerIndex: rowIndex,
  72. style
  73. });
  74. });
  75. };
  76. onUpdated(() => {
  77. if (scrollLeftInfo == null ? void 0 : scrollLeftInfo.value) {
  78. scrollToLeft(scrollLeftInfo.value);
  79. }
  80. });
  81. expose({
  82. scrollToLeft
  83. });
  84. return () => {
  85. if (props.height <= 0)
  86. return;
  87. return createVNode("div", {
  88. "ref": headerRef,
  89. "class": props.class,
  90. "style": unref(headerStyle),
  91. "role": "rowgroup"
  92. }, [createVNode("div", {
  93. "style": unref(rowStyle),
  94. "class": ns.e("header")
  95. }, [renderDynamicRows(), renderFixedRows()])]);
  96. };
  97. }
  98. });
  99. var Header = TableV2Header;
  100. export { Header as default };
  101. //# sourceMappingURL=header.mjs.map