A vue 2.x component for rendering JSON data as a tree structure
A clear, easy JSON tree view component made with vue.js 2.x.
vue-json-pretty
A vue 2.x component for rendering JSON data as a tree structure.
- basic: JSON pretty
- advanced: get item data from JSON
Links
Install
npm install vue-json-pretty
Usage
<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
}
}
Props
- If you are using only the basic features (JSON pretty), just focus on the
base
properties. - If you are using advanced features (selected), you can use
base
andadvanced
attributes.
Attribute | Level | Description | Type | Default |
---|---|---|---|---|
data | basic | json data | JSON object | - |
deep | basic | data depth, data larger than this depth will not be expanded | number | Infinity |
showLength | basic | whether to show the length when closed | boolean | false |
showLine | basic | whether to show the line | boolean | true |
showDoubleQuotes | basic | whether to show doublequotes on key | boolean | true |
highlightMouseoverNode | basic | highlight current node when mouseover | boolean | false |
v-model | advanced | defines value when the tree can be selected | string, array | -, [] |
path | advanced | root data path | string | root |
pathChecked | advanced | defines the selected data path | array | [] |
pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
selectableType | advanced | defines the selected type, this feature is not supported by default | enum: -, multiple, single | - |
showSelectController | advanced | whether to show the select controller at left | boolean | false |
selectOnClickNode | advanced | whether to change selected value when click node | boolean | true |
highlightSelectedNode | advanced | highlight current node when selected | boolean | true |
Events
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) |