Vue 展示JSON树结构插件 vue-json-prett
vue-json-pretty
一个将 JSON 字符串渲染成树形结构的 Vue 组件
- 基础功能: JSON 的美化
- 高级功能: JSON 数据对应层级数据的获取
链接
安装
npm install vue-json-pretty -save
或
yarn add vue-json-pretty
使用
<template>
<div>
<vue-json-pretty
:path="'res'"
:data="{ key: 'value' }"
@click="handleClick">
</vue-json-pretty>
</div>
</template>
// 更多用法请见demo页面
import VueJsonPretty from 'vue-json-pretty'
export default {
components: {
VueJsonPretty
}
}
配置
| 属性 |
说明 |
类型 |
默认值 |
| data |
待美化的源数据，注意不是 JSON 字符串 |
JSON 对象 |
- |
| deep |
数据深度, 大于该深度的数据将不被展开 |
number |
Infinity |
| showLength |
是否在数据线闭合的时候展示长度 |
boolean |
false |
| showLine |
是否显示缩紧标识线 |
boolean |
true |
| showDoubleQuotes |
是否展示key名的双引号 |
boolean |
true |
| highlightMouseoverNode |
是否在mouseover的时候高亮 |
boolean |
false |
| v-model |
双向绑定选中的数据层级 |
string, array |
-, [] |
| path |
定义最顶层数据层级 |
string |
root |
| pathChecked |
定义哪些数据层级是已被选中的 |
array |
[] |
| pathSelectable |
定义哪些数据层级是可以被选中的，返回true或false |
Function(itemPath, itemData) |
- |
| selectableType |
定义组件支持的选中方式，默认无选中功能 |
enum: -, multiple, single |
- |
| showSelectController |
是否展示选择控制器 |
boolean |
false |
| selectOnClickNode |
是否在点击节点的时候触发v-model双向绑定 |
boolean |
true |
| highlightSelectedNode |
是否高亮已选项 |
boolean |
true |
| customValueFormatter |
可以进行值的自定义渲染 |
Function(data, key, parent, defaultFormatted) |
- |
Events
| 事件名 |
说明 |
回调参数 |
| click |
点击某一个数据层级时触发的事件 |
(path, data) |
| change |
v-model改变的事件(仅在选择模式下可用) |
(newVal, oldVal) |
本文标题：Vue 展示JSON树结构插件 vue-json-prett
本文链接：https://www.haomeiwen.com/subject/dnredktx.html
网友评论