A Vue component for rendering JSON data as a tree structure.
It supports Vue3 at least.
English | 简体中文
- As a JSON Formatter.
- ...
$ npm install g-json-view --save$ yarn add g-json-view<template>
<div>
<g-json-view :json="{ key: 'value' }" />
</div>
</template>
<script>
import GJsonView from 'g-json-view';
export default {
components: {
GJsonView,
},
};
</script>| Property | Description | Type | Default |
|---|---|---|---|
| json | JSON data | JSON object | - |
| deep | Paths greater than or equal to this depth will be collapsed | number | 4 |
| showLength | Show the length when collapsed | boolean | true |
| showLine | Show the line | boolean | true |
| showIcon | Show the icon | boolean | true |
| showDoubleQuotes | Show doublequotes on key | boolean | true |
| rootPath | Root data path | string | root |
| collapsedOnClickBrackets | Support click brackets or text to collapse | boolean | true |
| renderNodeKey | render node key | ({ node, defaultKey }) => vNode | - |
| renderNodeValue | render node value | ({ node, defaultValue }) => vNode | - |
| nodeClick | triggered when a node is clicked | ({ isClosed, path }) => void | - |
| Event Name | Description | Parameters |
|---|---|---|
| nodeClick | triggers when click node | (node: NodeData) |