From 1f0ac0797fb139f12675560f3c3bffa1ac372590 Mon Sep 17 00:00:00 2001 From: hsiaosiyuan0 Date: Fri, 26 Nov 2021 08:25:33 +0800 Subject: [PATCH] feat: collapsePath --- example/Basic.vue | 23 ++++++++++++++++++++++- src/components/Tree/index.tsx | 12 +++++++++++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/example/Basic.vue b/example/Basic.vue index 0216658..49b91e7 100644 --- a/example/Basic.vue +++ b/example/Basic.vue @@ -38,6 +38,10 @@ +
+ + +
@@ -46,6 +50,7 @@ :data="state.data" :deep="state.deep" :deepCollapseChildren="state.deepCollapseChildren" + :collapsePath="state.collapsePath" :show-double-quotes="state.showDoubleQuotes" :show-length="state.showLength" :show-line="state.showLine" @@ -75,6 +80,9 @@ const defaultData = { 'Traffic paradise: How to design streets for people and unmanned vehicles in the future?', source: 'Netease smart', link: 'http://netease.smart/traffic-paradise/1235', + author: { + names: ['Daniel', 'Mike', 'John'], + }, }, { news_id: 51182, @@ -100,8 +108,10 @@ export default defineComponent({ showDoubleQuotes: true, collapsedOnClickBrackets: true, useCustomLinkFormatter: false, - deep: 3, + deep: 4, deepCollapseChildren: false, + collapsePath: /members/, + collapsePathPattern: 'members', }); const customLinkFormatter = (data, key, path, defaultFormatted) => { @@ -123,6 +133,17 @@ export default defineComponent({ }, ); + watch( + () => state.collapsePath, + newVal => { + try { + state.collapsePath = new RegExp(newVal); + } catch (err) { + // console.log('Regexp ERROR'); + } + }, + ); + return { state, customLinkFormatter, diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx index d7f6381..3c00e31 100644 --- a/src/components/Tree/index.tsx +++ b/src/components/Tree/index.tsx @@ -24,6 +24,10 @@ export default defineComponent({ type: Boolean, default: false, }, + collapsePath: { + type: RegExp, + default: null, + }, // Data root path. path: { type: String, @@ -64,7 +68,13 @@ export default defineComponent({ const depthComparison = props.deepCollapseChildren ? item.level >= props.deep : item.level === props.deep; - if ((item.type === 'objectStart' || item.type === 'arrayStart') && depthComparison) { + const pathComparison = + depthComparison || + (props.collapsePath && props.collapsePath.test(item.path)); + if ( + (item.type === 'objectStart' || item.type === 'arrayStart') && + (depthComparison || pathComparison) + ) { return { ...acc, [item.path]: 1,