A vue 2.x component for rendering JSON data as a tree structure.
- As a JSON Formatter
- Get item data from JSON
npm install vue-json-pretty
<template>
<div>
...
<vue-json-pretty
:path="'res'"
:data="{ key: 'value' }"
@click="handleClick">
</vue-json-pretty>
</div>
</template>
import VueJsonPretty from 'vue-json-pretty'
export default {
components: {
VueJsonPretty
}
}
- If you are using only the normal features (JSON pretty), just focus on the
base
properties.
- If you are using higher features (Get data), you can use
base
and higher
attributes.
Attribute |
Level |
Description |
Type |
Default |
data |
normal |
json data |
JSON object |
- |
deep |
normal |
data depth, data larger than this depth will not be expanded |
number |
Infinity |
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 |
highlightMouseoverNode |
normal |
highlight current node when mouseover |
boolean |
false |
v-model |
higher |
defines value when the tree can be selected |
string, array |
-, [] |
path |
higher |
root data path |
string |
root |
pathChecked |
higher |
defines the selected data path |
array |
[] |
pathSelectable |
higher |
defines whether a data path supports selection |
Function(itemPath, itemData) |
- |
selectableType |
higher |
defines the selected type, this feature is not supported by default |
enum: -, multiple, single |
- |
showSelectController |
higher |
whether to show the select controller at left |
boolean |
false |
selectOnClickNode |
higher |
whether to change selected value when click node |
boolean |
true |
highlightSelectedNode |
higher |
highlight current node when selected |
boolean |
true |
customValueFormatter |
higher |
a function that can return different html or strings to display for values in the data. |
Function(data, key, parent, defaultFormatted) |
- |
Event Name |
Description |
Callback Parameters |
click |
triggered when a data item is clicked |
(path, data) |
change |
triggered when the selected value changed (only the selectableType not null) |
(newVal, oldVal) |