vue组件引用json数据_Vue 2.x组件，用于将JSON数据呈现为树形结构

vue组件引用json数据

vue-json-漂亮 (vue-json-pretty)

A clear, easy JSON tree view component made with vue.js 2.x.

用vue.js 2.x制作的清晰，简单的JSON树视图组件。

• basic: JSON pretty

  基本：JSON漂亮

• advanced: get item data from JSON

  高级：从JSON获取项目数据

View demo 查看演示 Download Source 下载源

安装 (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.

  如果仅使用基本功能(漂亮的JSON)，则只需关注base属性。

• If you are using advanced features (get item data), you need to focus on the base and advanced attributes.

  如果使用高级功能(获取项目数据)，则需要关注base属性和advanced属性。

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
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: both, checkbox, tree	-

属性	水平	描述	类型	默认
数据	基本的	json数据	JSON对象	--
深	基本的	数据深度，大于此深度的数据将不会扩展	数	无限
路径	高级	根数据路径	串	根
pathChecked	高级	定义选定的数据路径	数组	[]
pathSelectable	高级	定义数据路径是否支持选择	函数(itemPath，itemData)	--
selectableType	高级	定义选定的类型，默认情况下不支持此功能	枚举：两者，复选框，树	--

大事记 (Events)

• The following events are base on advanced features.

  以下事件基于高级功能。

Event Name	Description	Callback Parameters
click	triggered when a data item is clicked	(path, data)

活动名称	描述	回调参数
点击	单击数据项时触发	(路径，数据)

翻译自: https://vuejsexamples.com/a-vue-2-x-component-for-rendering-json-data-as-a-tree-structure/

vue组件引用json数据