BodyRow.js 7.8 KB

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