BodyRow.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
  3. import Cell from '../Cell';
  4. import { getColumnsKey } from '../utils/valueUtil';
  5. import ExpandedRow from './ExpandedRow';
  6. import { computed, defineComponent, shallowRef, watchEffect } from 'vue';
  7. import { useInjectTable } from '../context/TableContext';
  8. import { useInjectBody } from '../context/BodyContext';
  9. import classNames from '../../_util/classNames';
  10. export default defineComponent({
  11. name: 'BodyRow',
  12. inheritAttrs: false,
  13. props: ['record', 'index', 'renderIndex', 'recordKey', 'expandedKeys', 'rowComponent', 'cellComponent', 'customRow', 'rowExpandable', 'indent', 'rowKey', 'getRowKey', 'childrenColumnName'],
  14. setup(props, _ref) {
  15. let {
  16. attrs
  17. } = _ref;
  18. const tableContext = useInjectTable();
  19. const bodyContext = useInjectBody();
  20. const expandRended = shallowRef(false);
  21. const expanded = computed(() => props.expandedKeys && props.expandedKeys.has(props.recordKey));
  22. watchEffect(() => {
  23. if (expanded.value) {
  24. expandRended.value = true;
  25. }
  26. });
  27. const rowSupportExpand = computed(() => bodyContext.expandableType === 'row' && (!props.rowExpandable || props.rowExpandable(props.record)));
  28. // Only when row is not expandable and `children` exist in record
  29. const nestExpandable = computed(() => bodyContext.expandableType === 'nest');
  30. const hasNestChildren = computed(() => props.childrenColumnName && props.record && props.record[props.childrenColumnName]);
  31. const mergedExpandable = computed(() => rowSupportExpand.value || nestExpandable.value);
  32. const onInternalTriggerExpand = (record, event) => {
  33. bodyContext.onTriggerExpand(record, event);
  34. };
  35. // =========================== onRow ===========================
  36. const additionalProps = computed(() => {
  37. var _a;
  38. return ((_a = props.customRow) === null || _a === void 0 ? void 0 : _a.call(props, props.record, props.index)) || {};
  39. });
  40. const onClick = function (event) {
  41. var _a, _b;
  42. if (bodyContext.expandRowByClick && mergedExpandable.value) {
  43. onInternalTriggerExpand(props.record, event);
  44. }
  45. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  46. args[_key - 1] = arguments[_key];
  47. }
  48. (_b = (_a = additionalProps.value) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event, ...args);
  49. };
  50. const computeRowClassName = computed(() => {
  51. const {
  52. record,
  53. index,
  54. indent
  55. } = props;
  56. const {
  57. rowClassName
  58. } = bodyContext;
  59. if (typeof rowClassName === 'string') {
  60. return rowClassName;
  61. } else if (typeof rowClassName === 'function') {
  62. return rowClassName(record, index, indent);
  63. }
  64. return '';
  65. });
  66. const columnsKey = computed(() => getColumnsKey(bodyContext.flattenColumns));
  67. return () => {
  68. const {
  69. class: className,
  70. style
  71. } = attrs;
  72. const {
  73. record,
  74. index,
  75. rowKey,
  76. indent = 0,
  77. rowComponent: RowComponent,
  78. cellComponent
  79. } = props;
  80. const {
  81. prefixCls,
  82. fixedInfoList,
  83. transformCellText
  84. } = tableContext;
  85. const {
  86. flattenColumns,
  87. expandedRowClassName,
  88. indentSize,
  89. expandIcon,
  90. expandedRowRender,
  91. expandIconColumnIndex
  92. } = bodyContext;
  93. const baseRowNode = _createVNode(RowComponent, _objectSpread(_objectSpread({}, additionalProps.value), {}, {
  94. "data-row-key": rowKey,
  95. "class": classNames(className, `${prefixCls}-row`, `${prefixCls}-row-level-${indent}`, computeRowClassName.value, additionalProps.value.class),
  96. "style": [style, additionalProps.value.style],
  97. "onClick": onClick
  98. }), {
  99. default: () => [flattenColumns.map((column, colIndex) => {
  100. const {
  101. customRender,
  102. dataIndex,
  103. className: columnClassName
  104. } = column;
  105. const key = columnsKey[colIndex];
  106. const fixedInfo = fixedInfoList[colIndex];
  107. let additionalCellProps;
  108. if (column.customCell) {
  109. additionalCellProps = column.customCell(record, index, column);
  110. }
  111. // not use slot to fix https://github.com/vueComponent/ant-design-vue/issues/5295
  112. const appendNode = colIndex === (expandIconColumnIndex || 0) && nestExpandable.value ? _createVNode(_Fragment, null, [_createVNode("span", {
  113. "style": {
  114. paddingLeft: `${indentSize * indent}px`
  115. },
  116. "class": `${prefixCls}-row-indent indent-level-${indent}`
  117. }, null), expandIcon({
  118. prefixCls,
  119. expanded: expanded.value,
  120. expandable: hasNestChildren.value,
  121. record,
  122. onExpand: onInternalTriggerExpand
  123. })]) : null;
  124. return _createVNode(Cell, _objectSpread(_objectSpread({
  125. "cellType": "body",
  126. "class": columnClassName,
  127. "ellipsis": column.ellipsis,
  128. "align": column.align,
  129. "component": cellComponent,
  130. "prefixCls": prefixCls,
  131. "key": key,
  132. "record": record,
  133. "index": index,
  134. "renderIndex": props.renderIndex,
  135. "dataIndex": dataIndex,
  136. "customRender": customRender
  137. }, fixedInfo), {}, {
  138. "additionalProps": additionalCellProps,
  139. "column": column,
  140. "transformCellText": transformCellText,
  141. "appendNode": appendNode
  142. }), null);
  143. })]
  144. });
  145. // ======================== Expand Row =========================
  146. let expandRowNode;
  147. if (rowSupportExpand.value && (expandRended.value || expanded.value)) {
  148. const expandContent = expandedRowRender({
  149. record,
  150. index,
  151. indent: indent + 1,
  152. expanded: expanded.value
  153. });
  154. const computedExpandedRowClassName = expandedRowClassName && expandedRowClassName(record, index, indent);
  155. expandRowNode = _createVNode(ExpandedRow, {
  156. "expanded": expanded.value,
  157. "class": classNames(`${prefixCls}-expanded-row`, `${prefixCls}-expanded-row-level-${indent + 1}`, computedExpandedRowClassName),
  158. "prefixCls": prefixCls,
  159. "component": RowComponent,
  160. "cellComponent": cellComponent,
  161. "colSpan": flattenColumns.length,
  162. "isEmpty": false
  163. }, {
  164. default: () => [expandContent]
  165. });
  166. }
  167. return _createVNode(_Fragment, null, [baseRowNode, expandRowNode]);
  168. };
  169. }
  170. });