# API
# Props
| Name | Type | Description |
|---|---|---|
| jsonData | Array / Object | 要显示的 json 数据 |
| showLine | Boolean | 是否显示辅助连接线，默认为 true（显示） |
| indent | String | 层级缩进值，默认为 '20px' |
| expandDeep | Number | 自动展开的层级，默认为 2 |
可前往 Playground 查看效果
# Slots
| Name | Slot props | Description |
|---|---|---|
| toggle | { collapse } | 展开、收起的图标，展开时，collapse 为 false，收起时为 true |
| count | { count, type } | 显示在数组或对象类型的值后面表示其有多少项的说明，count 表示数组长度或对象的键值对个数，type 表示值类型（'array' 或 'object'） |
| key | { itemKey } | 显示的 key。如果是对象，则是对象的 key；如果是数组，则是数组项的索引。 |
| val | { itemVal, type } | 显示的 value。对象的 value 或者数组的项。 |
# 自定义 toggle（使用 Element UI 的图标）
{
name:"Tom"
age:2
nums:[...]
0:1
1:1
2:2
3:3
4:5
5:8
friends:[...]
0:{...}
name:"Jerry"
age:1
nums:[...]
0:7
1:{...}
name:"Tuffy"
age:1
2:{...}
name:"Spike"
3:{...}
name:"Tyke"
自定义 `toggle`（使用 Element UI 的图标）
<JsonTree :json-data="jsonData" :expand-deep="1">
+ <template #toggle="{ collapse }">
+ <i :class="collapse ? 'el-icon-caret-right' : 'el-icon-caret-bottom'"></i>
+ </template>
+</JsonTree>
+1
2
3
4
5
2
3
4
5
# 自定义 count
-
{
+ //（值类型：object，共 4 项）
+
+
name:"Tom"
+
age:2
+
nums:[...]
+ //（值类型：array，共 6 项）
+
+
0:1
+
1:1
+
2:2
+
3:3
+
4:5
+
5:8
+
friends:[...]
+ //（值类型：array，共 4 项）
+
+
0:{...}
+ //（值类型：object，共 3 项）
+
+
name:"Jerry"
+
age:1
+
nums:[...]
+ //（值类型：array，共 1 项）
+
+
0:7
+
1:{...}
+ //（值类型：object，共 2 项）
+
+
name:"Tuffy"
+
age:1
+
2:{...}
+ //（值类型：object，共 1 项）
+
+
name:"Spike"
+
3:{...}
+ //（值类型：object，共 1 项）
+
+
name:"Tyke"
自定义 `count`
<JsonTree :json-data="jsonData" :expand-deep="1">
+ <template #count="{ count, type }">
+ //（值类型：{{ type }}，共 {{ count }} 项）
+ </template>
+</JsonTree>
+1
2
3
4
5
2
3
4
5
# 自定义 key
-
{
+
name:"Tom"
+
age:2
+
nums:[...]
+
0:1
+
1:1
+
2:2
+
3:3
+
4:5
+
5:8
+
friends:[...]
+
0:{...}
+
name:"Jerry"
+
age:1
+
nums:[...]
+
0:7
+
1:{...}
+
name:"Tuffy"
+
age:1
+
2:{...}
+
name:"Spike"
+
3:{...}
+
name:"Tyke"
自定义 `key`
<JsonTree :json-data="jsonData" :expand-deep="1">
+ <template #key="{ itemKey }">
+ <span style="color: #f00;">{{ itemKey }}</span>
+ </template>
+</JsonTree>
+1
2
3
4
5
2
3
4
5
# 自定义 val
-
{
+
name:Tom（string）
+
age:2（number）
+
nums:[...]
+
0:1（number）
+
1:1（number）
+
2:2（number）
+
3:3（number）
+
4:5（number）
+
5:8（number）
+
friends:[...]
+
0:{...}
+
name:Jerry（string）
+
age:1（number）
+
nums:[...]
+
0:7（number）
+
1:{...}
+
name:Tuffy（string）
+
age:1（number）
+
2:{...}
+
name:Spike（string）
+
3:{...}
+
name:Tyke（string）
自定义 `val`
<JsonTree :json-data="jsonData" :expand-deep="1">
+ <template #val="{ itemVal, type }">
+ <span style="color: #f00;">{{ itemVal }}（{{ type }}）</span>
+ </template>
+</JsonTree>
+1
2
3
4
5
2
3
4
5
# Events
暂无
# Methods
| Name | Params | Description |
|---|---|---|
| expandAll | -- | 全部展开 |
| collapseAll | -- | 全部收起 |
+ ← + + Getting started +