Skip to content

Commit 7460b87

Browse files
leezngleezng
authored
Merge pull request #259 from boukadam/1.x
feat: support collapsedNodeLength for vue2
2 parents b5e2e29 + 0f0b1f0 commit 7460b87

File tree

4 files changed

+48
-27
lines changed

4 files changed

+48
-27
lines changed

‎README.md‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -106,28 +106,29 @@ plugins: [
106106

107107
## Props
108108

109-
| Property | Description | Type | Default |
110-
| ------------------------ | ----------------------------------------------- | -------------------- | ------- |
111-
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112-
| deep | Paths greater than this depth will be collapsed | number | - |
113-
| showLength | Show the length when collapsed | boolean | false |
114-
| showLine | Show the line | boolean | true |
115-
| showLineNumber | Show the line number | boolean | false |
116-
| showIcon | Show the icon | boolean | false |
117-
| showDoubleQuotes | Show doublequotes on key | boolean | true |
118-
| virtual | Use virtual scroll | boolean | false |
119-
| height | The height of list when using virtual | number | 400 |
120-
| itemHeight | The height of node when using virtual | number | 20 |
121-
| selectedValue.sync | Selected data path | string, array | - |
122-
| rootPath | Root data path | string | `root` |
123-
| nodeSelectable | Defines whether a data path supports selection | function(node) | - |
124-
| selectableType | Support path select, default none | `multiple`, `single` | - |
125-
| showSelectController | Show the select controller | boolean | false |
126-
| selectOnClickNode | Trigger select when click node | boolean | true |
127-
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
128-
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
129-
| editable | Support editable | boolean | false |
130-
| editableTrigger | Trigger | `click`, `dblclick` | `click` |
109+
| Property | Description | Type | Default |
110+
| ------------------------ |---------------------------------------------------------------------------------|----------------------|---------|
111+
| data(v-model) | JSON data, support v-model when use editable | JSON object | - |
112+
| collapsedNodeLength | Objects or arrays which length is greater than this threshold will be collapsed | number | - |
113+
| deep | Paths greater than this depth will be collapsed | number | - |
114+
| showLength | Show the length when collapsed | boolean | false |
115+
| showLine | Show the line | boolean | true |
116+
| showLineNumber | Show the line number | boolean | false |
117+
| showIcon | Show the icon | boolean | false |
118+
| showDoubleQuotes | Show doublequotes on key | boolean | true |
119+
| virtual | Use virtual scroll | boolean | false |
120+
| height | The height of list when using virtual | number | 400 |
121+
| itemHeight | The height of node when using virtual | number | 20 |
122+
| selectedValue.sync | Selected data path | string, array | - |
123+
| rootPath | Root data path | string | `root` |
124+
| nodeSelectable | Defines whether a data path supports selection | function(node) | - |
125+
| selectableType | Support path select, default none | `multiple`, `single` | - |
126+
| showSelectController | Show the select controller | boolean | false |
127+
| selectOnClickNode | Trigger select when click node | boolean | true |
128+
| highlightSelectedNode | Support highlighting selected nodes | boolean | true |
129+
| collapsedOnClickBrackets | Support click brackets to collapse | boolean | true |
130+
| editable | Support editable | boolean | false |
131+
| editableTrigger | Trigger | `click`, `dblclick` | `click` |
131132

132133
## Events
133134

‎README.zh-CN.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
| 属性 | 说明 | 类型 | 默认值 |
1313
| ------------------------ | ------------------------------ | -------------------- | ------------- |
1414
| data(v-model) | 源数据，注意不是 `JSON` 字符串 | `JSON` 数据对象 | - |
15+
| collapsedNodeLength | 长度大于此阈值的对象或数组将被折叠 | number | Infinity |
1516
| deep | 深度，大于该深度的路径将被折叠 | number | Infinity |
1617
| showLength | 在数据折叠的时候展示长度 | boolean | false |
1718
| showLine | 展示标识线 | boolean | true |

‎example/VirtualList.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,19 @@
2626
<option :value="4">4</option>
2727
</select>
2828
</div>
29+
<div>
30+
<label>collapsedNodeLength</label>
31+
<select v-model="collapsedNodeLength">
32+
<option :value="10">10</option>
33+
<option :value="Infinity">Infinity</option>
34+
</select>
35+
</div>
2936
</div>
3037
</div>
3138
<div class="block">
3239
<h3>vue-json-pretty(1000+ items):</h3>
3340
<vue-json-pretty
41+
:collapse-threshold="collapsedNodeLength"
3442
:virtual="true"
3543
:item-height="+itemHeight"
3644
:data="data"
@@ -69,6 +77,7 @@ export default {
6977
showLine: true,
7078
collapsedOnClickBrackets: true,
7179
deep: 3,
80+
collapsedNodeLength: Infinity,
7281
itemHeight: 20,
7382
};
7483
},

‎src/components/Tree/index.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@ export default {
8080
prop: 'data',
8181
},
8282
props: {
83+
collapsedNodeLength: {
84+
type: Number,
85+
default: Infinity
86+
},
8387
// JSON
8488
data: {
8589
type: [String, Number, Boolean, Array, Object],
@@ -182,7 +186,7 @@ export default {
182186
return {
183187
translateY: 0,
184188
visibleData: null,
185-
hiddenPaths: this.initHiddenPaths(jsonFlatten(this.data, this.rootPath), this.deep),
189+
hiddenPaths: this.initHiddenPaths(jsonFlatten(this.data, this.rootPath), this.deep, this.collapsedNodeLength),
186190
};
187191
},
188192
computed: {
@@ -263,15 +267,21 @@ export default {
263267
264268
deep: {
265269
handler(val) {
266-
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, val);
270+
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, val, this.collapsedNodeLength);
271+
},
272+
},
273+
274+
collapsedNodeLength: {
275+
handler(val) {
276+
this.hiddenPaths = this.initHiddenPaths(this.originFlatData, this.deep, val);
267277
},
268278
},
269279
},
270280
methods: {
271-
initHiddenPaths(originFlatData, deep) {
281+
initHiddenPaths(originFlatData, deep, collapsedNodeLength) {
272282
return originFlatData.reduce((acc, item) => {
273-
const depthComparison = item.level >= deep;
274-
if ((item.type === 'objectStart' || item.type === 'arrayStart') && depthComparison) {
283+
const doCollapse = item.level >= deep || item.length >= collapsedNodeLength;
284+
if ((item.type === 'objectStart' || item.type === 'arrayStart') && doCollapse) {
275285
return {
276286
...acc,
277287
[item.path]: 1,

0 commit comments

Comments
 (0)