tree.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var util = require('../util.js');
  5. function useTree(watcherData) {
  6. const expandRowKeys = vue.ref([]);
  7. const treeData = vue.ref({});
  8. const indent = vue.ref(16);
  9. const lazy = vue.ref(false);
  10. const lazyTreeNodeMap = vue.ref({});
  11. const lazyColumnIdentifier = vue.ref("hasChildren");
  12. const childrenColumnName = vue.ref("children");
  13. const instance = vue.getCurrentInstance();
  14. const normalizedData = vue.computed(() => {
  15. if (!watcherData.rowKey.value)
  16. return {};
  17. const data = watcherData.data.value || [];
  18. return normalize(data);
  19. });
  20. const normalizedLazyNode = vue.computed(() => {
  21. const rowKey = watcherData.rowKey.value;
  22. const keys = Object.keys(lazyTreeNodeMap.value);
  23. const res = {};
  24. if (!keys.length)
  25. return res;
  26. keys.forEach((key) => {
  27. if (lazyTreeNodeMap.value[key].length) {
  28. const item = { children: [] };
  29. lazyTreeNodeMap.value[key].forEach((row) => {
  30. const currentRowKey = util.getRowIdentity(row, rowKey);
  31. item.children.push(currentRowKey);
  32. if (row[lazyColumnIdentifier.value] && !res[currentRowKey]) {
  33. res[currentRowKey] = { children: [] };
  34. }
  35. });
  36. res[key] = item;
  37. }
  38. });
  39. return res;
  40. });
  41. const normalize = (data) => {
  42. const rowKey = watcherData.rowKey.value;
  43. const res = {};
  44. util.walkTreeNode(data, (parent, children, level) => {
  45. const parentId = util.getRowIdentity(parent, rowKey);
  46. if (Array.isArray(children)) {
  47. res[parentId] = {
  48. children: children.map((row) => util.getRowIdentity(row, rowKey)),
  49. level
  50. };
  51. } else if (lazy.value) {
  52. res[parentId] = {
  53. children: [],
  54. lazy: true,
  55. level
  56. };
  57. }
  58. }, childrenColumnName.value, lazyColumnIdentifier.value);
  59. return res;
  60. };
  61. const updateTreeData = (ifChangeExpandRowKeys = false, ifExpandAll = ((_a) => (_a = instance.store) == null ? void 0 : _a.states.defaultExpandAll.value)()) => {
  62. var _a2;
  63. const nested = normalizedData.value;
  64. const normalizedLazyNode_ = normalizedLazyNode.value;
  65. const keys = Object.keys(nested);
  66. const newTreeData = {};
  67. if (keys.length) {
  68. const oldTreeData = vue.unref(treeData);
  69. const rootLazyRowKeys = [];
  70. const getExpanded = (oldValue, key) => {
  71. if (ifChangeExpandRowKeys) {
  72. if (expandRowKeys.value) {
  73. return ifExpandAll || expandRowKeys.value.includes(key);
  74. } else {
  75. return !!(ifExpandAll || (oldValue == null ? void 0 : oldValue.expanded));
  76. }
  77. } else {
  78. const included = ifExpandAll || expandRowKeys.value && expandRowKeys.value.includes(key);
  79. return !!((oldValue == null ? void 0 : oldValue.expanded) || included);
  80. }
  81. };
  82. keys.forEach((key) => {
  83. const oldValue = oldTreeData[key];
  84. const newValue = { ...nested[key] };
  85. newValue.expanded = getExpanded(oldValue, key);
  86. if (newValue.lazy) {
  87. const { loaded = false, loading = false } = oldValue || {};
  88. newValue.loaded = !!loaded;
  89. newValue.loading = !!loading;
  90. rootLazyRowKeys.push(key);
  91. }
  92. newTreeData[key] = newValue;
  93. });
  94. const lazyKeys = Object.keys(normalizedLazyNode_);
  95. if (lazy.value && lazyKeys.length && rootLazyRowKeys.length) {
  96. lazyKeys.forEach((key) => {
  97. const oldValue = oldTreeData[key];
  98. const lazyNodeChildren = normalizedLazyNode_[key].children;
  99. if (rootLazyRowKeys.includes(key)) {
  100. if (newTreeData[key].children.length !== 0) {
  101. throw new Error("[ElTable]children must be an empty array.");
  102. }
  103. newTreeData[key].children = lazyNodeChildren;
  104. } else {
  105. const { loaded = false, loading = false } = oldValue || {};
  106. newTreeData[key] = {
  107. lazy: true,
  108. loaded: !!loaded,
  109. loading: !!loading,
  110. expanded: getExpanded(oldValue, key),
  111. children: lazyNodeChildren,
  112. level: ""
  113. };
  114. }
  115. });
  116. }
  117. }
  118. treeData.value = newTreeData;
  119. (_a2 = instance.store) == null ? void 0 : _a2.updateTableScrollY();
  120. };
  121. vue.watch(() => expandRowKeys.value, () => {
  122. updateTreeData(true);
  123. });
  124. vue.watch(() => normalizedData.value, () => {
  125. updateTreeData();
  126. });
  127. vue.watch(() => normalizedLazyNode.value, () => {
  128. updateTreeData();
  129. });
  130. const updateTreeExpandKeys = (value) => {
  131. expandRowKeys.value = value;
  132. updateTreeData();
  133. };
  134. const toggleTreeExpansion = (row, expanded) => {
  135. instance.store.assertRowKey();
  136. const rowKey = watcherData.rowKey.value;
  137. const id = util.getRowIdentity(row, rowKey);
  138. const data = id && treeData.value[id];
  139. if (id && data && "expanded" in data) {
  140. const oldExpanded = data.expanded;
  141. expanded = typeof expanded === "undefined" ? !data.expanded : expanded;
  142. treeData.value[id].expanded = expanded;
  143. if (oldExpanded !== expanded) {
  144. instance.emit("expand-change", row, expanded);
  145. }
  146. instance.store.updateTableScrollY();
  147. }
  148. };
  149. const loadOrToggle = (row) => {
  150. instance.store.assertRowKey();
  151. const rowKey = watcherData.rowKey.value;
  152. const id = util.getRowIdentity(row, rowKey);
  153. const data = treeData.value[id];
  154. if (lazy.value && data && "loaded" in data && !data.loaded) {
  155. loadData(row, id, data);
  156. } else {
  157. toggleTreeExpansion(row, void 0);
  158. }
  159. };
  160. const loadData = (row, key, treeNode) => {
  161. const { load } = instance.props;
  162. if (load && !treeData.value[key].loaded) {
  163. treeData.value[key].loading = true;
  164. load(row, treeNode, (data) => {
  165. if (!Array.isArray(data)) {
  166. throw new TypeError("[ElTable] data must be an array");
  167. }
  168. treeData.value[key].loading = false;
  169. treeData.value[key].loaded = true;
  170. treeData.value[key].expanded = true;
  171. if (data.length) {
  172. lazyTreeNodeMap.value[key] = data;
  173. }
  174. instance.emit("expand-change", row, true);
  175. });
  176. }
  177. };
  178. return {
  179. loadData,
  180. loadOrToggle,
  181. toggleTreeExpansion,
  182. updateTreeExpandKeys,
  183. updateTreeData,
  184. normalize,
  185. states: {
  186. expandRowKeys,
  187. treeData,
  188. indent,
  189. lazy,
  190. lazyTreeNodeMap,
  191. lazyColumnIdentifier,
  192. childrenColumnName
  193. }
  194. };
  195. }
  196. exports["default"] = useTree;
  197. //# sourceMappingURL=tree.js.map