59ae9183310f822ffa1e012753ebba43ad8ba13c31ba29482b3c0d88482e2dbfad91cab533a614fb8d611f62dfe6941e675eb8a10bc1e7b273b5a882394d52 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. import { h } from 'vue';
  2. import { ElCheckbox } from '../../checkbox/index.mjs';
  3. import { ElIcon } from '../../icon/index.mjs';
  4. import { ArrowRight, Loading } from '@element-plus/icons-vue';
  5. import { isNumber, isBoolean } from '../../../utils/types.mjs';
  6. import { isFunction } from '@vue/shared';
  7. import { getProp } from '../../../utils/objects.mjs';
  8. const defaultClassNames = {
  9. selection: "table-column--selection",
  10. expand: "table__expand-column"
  11. };
  12. const cellStarts = {
  13. default: {
  14. order: ""
  15. },
  16. selection: {
  17. width: 48,
  18. minWidth: 48,
  19. realWidth: 48,
  20. order: ""
  21. },
  22. expand: {
  23. width: 48,
  24. minWidth: 48,
  25. realWidth: 48,
  26. order: ""
  27. },
  28. index: {
  29. width: 48,
  30. minWidth: 48,
  31. realWidth: 48,
  32. order: ""
  33. }
  34. };
  35. const getDefaultClassName = (type) => {
  36. return defaultClassNames[type] || "";
  37. };
  38. const cellForced = {
  39. selection: {
  40. renderHeader({
  41. store,
  42. column
  43. }) {
  44. var _a;
  45. function isDisabled() {
  46. return store.states.data.value && store.states.data.value.length === 0;
  47. }
  48. return h(ElCheckbox, {
  49. disabled: isDisabled(),
  50. size: store.states.tableSize.value,
  51. indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
  52. "onUpdate:modelValue": (_a = store.toggleAllSelection) != null ? _a : void 0,
  53. modelValue: store.states.isAllSelected.value,
  54. ariaLabel: column.label
  55. });
  56. },
  57. renderCell({
  58. row,
  59. column,
  60. store,
  61. $index
  62. }) {
  63. return h(ElCheckbox, {
  64. disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
  65. size: store.states.tableSize.value,
  66. onChange: () => {
  67. store.commit("rowSelectedChanged", row);
  68. },
  69. onClick: (event) => event.stopPropagation(),
  70. modelValue: store.isSelected(row),
  71. ariaLabel: column.label
  72. });
  73. },
  74. sortable: false,
  75. resizable: false
  76. },
  77. index: {
  78. renderHeader({
  79. column
  80. }) {
  81. return column.label || "#";
  82. },
  83. renderCell({
  84. column,
  85. $index
  86. }) {
  87. let i = $index + 1;
  88. const index = column.index;
  89. if (isNumber(index)) {
  90. i = $index + index;
  91. } else if (isFunction(index)) {
  92. i = index($index);
  93. }
  94. return h("div", {}, [i]);
  95. },
  96. sortable: false
  97. },
  98. expand: {
  99. renderHeader({
  100. column
  101. }) {
  102. return column.label || "";
  103. },
  104. renderCell({
  105. column,
  106. row,
  107. store,
  108. expanded
  109. }) {
  110. const { ns } = store;
  111. const classes = [ns.e("expand-icon")];
  112. if (!column.renderExpand && expanded) {
  113. classes.push(ns.em("expand-icon", "expanded"));
  114. }
  115. const callback = function(e) {
  116. e.stopPropagation();
  117. store.toggleRowExpansion(row);
  118. };
  119. return h("div", {
  120. class: classes,
  121. onClick: callback
  122. }, {
  123. default: () => {
  124. if (column.renderExpand) {
  125. return [
  126. column.renderExpand({
  127. expanded
  128. })
  129. ];
  130. }
  131. return [
  132. h(ElIcon, null, {
  133. default: () => {
  134. return [h(ArrowRight)];
  135. }
  136. })
  137. ];
  138. }
  139. });
  140. },
  141. sortable: false,
  142. resizable: false
  143. }
  144. };
  145. function defaultRenderCell({
  146. row,
  147. column,
  148. $index
  149. }) {
  150. var _a;
  151. const property = column.property;
  152. const value = property && getProp(row, property).value;
  153. if (column && column.formatter) {
  154. return column.formatter(row, column, value, $index);
  155. }
  156. return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
  157. }
  158. function treeCellPrefix({
  159. row,
  160. treeNode,
  161. store
  162. }, createPlaceholder = false) {
  163. const { ns } = store;
  164. if (!treeNode) {
  165. if (createPlaceholder) {
  166. return [
  167. h("span", {
  168. class: ns.e("placeholder")
  169. })
  170. ];
  171. }
  172. return null;
  173. }
  174. const ele = [];
  175. const callback = function(e) {
  176. e.stopPropagation();
  177. if (treeNode.loading) {
  178. return;
  179. }
  180. store.loadOrToggle(row);
  181. };
  182. if (treeNode.indent) {
  183. ele.push(h("span", {
  184. class: ns.e("indent"),
  185. style: { "padding-left": `${treeNode.indent}px` }
  186. }));
  187. }
  188. if (isBoolean(treeNode.expanded) && !treeNode.noLazyChildren) {
  189. const expandClasses = [
  190. ns.e("expand-icon"),
  191. treeNode.expanded ? ns.em("expand-icon", "expanded") : ""
  192. ];
  193. let icon = ArrowRight;
  194. if (treeNode.loading) {
  195. icon = Loading;
  196. }
  197. ele.push(h("div", {
  198. class: expandClasses,
  199. onClick: callback
  200. }, {
  201. default: () => {
  202. return [
  203. h(ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
  204. default: () => [h(icon)]
  205. })
  206. ];
  207. }
  208. }));
  209. } else {
  210. ele.push(h("span", {
  211. class: ns.e("placeholder")
  212. }));
  213. }
  214. return ele;
  215. }
  216. export { cellForced, cellStarts, defaultRenderCell, getDefaultClassName, treeCellPrefix };
  217. //# sourceMappingURL=config.mjs.map