From 0cdcfa8cb2a3b5ee866779a1486aedd383f193f0 Mon Sep 17 00:00:00 2001 From: Fred Rivett Date: Tue, 17 Aug 2021 15:54:54 +0100 Subject: [PATCH 1/2] Collapse children greater than or equal to depth When a user specifies a depth to be collapsed, the intention is to make the JSON tidy so it is easy to visually parse. Currently when the user then expands an item, it expands all its children fully, which is rarely the intention. I think this should collapse all children beyond the depth level, so that when the items are opened up the children are collapsed. That said, for backwards compatibility I've implemented this as a new prop, defaulting to false, so that anyone upgrading won't see a change in behaviour. --- src/components/Tree/index.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Tree/index.vue b/src/components/Tree/index.vue index 0af6508..bcd0ee1 100644 --- a/src/components/Tree/index.vue +++ b/src/components/Tree/index.vue @@ -55,6 +55,10 @@ export default { type: Number, default: Infinity, }, + deepCollapseChildren: { + type: Boolean, + default: false, + }, // 数据层级顶级路径 path: { type: String, @@ -129,9 +133,12 @@ export default { translateY: 0, visibleData: null, hiddenPaths: jsonFlatten(this.data, this.path).reduce((acc, item) => { + const depthComparison = this.deepCollapseChildren + ? item.level >= this.deep + : item.level === this.deep; if ( (item.type === 'objectStart' || item.type === 'arrayStart') && - item.level === this.deep + depthComparison ) { return { ...acc, From 3981f854a8b6326d4a5978cc09e1b7cb6c1a952e Mon Sep 17 00:00:00 2001 From: Fred Rivett Date: Tue, 17 Aug 2021 15:58:57 +0100 Subject: [PATCH 2/2] Update README to include deepCollapseChildren Let the user know about the new prop for collapsing all children at the level below the `deep` prop passed. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index f364694..4146376 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,7 @@ plugins: [ | ------------------------ | ------ | --------------------------------------------------------------------------------------- | ---------------------------------------------- | -------- | | data | normal | JSON data | JSON object | - | | deep | normal | Data depth, data larger than this depth will not be expanded | number | Infinity | +| deepCollapseChildren | normal | Whether children collapsed by `deep` prop should also be collapsed | boolean | false | | showLength | normal | Whether to show the length when closed | boolean | false | | showLine | normal | Whether to show the line | boolean | true | | showDoubleQuotes | normal | Whether to show doublequotes on key | boolean | true |