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

• Demo
• Github
• NPM
• 中文文档

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 and advanced 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)