vue-json-pretty

是一个将 JSON 字符串渲染成树形结构的 Vue 组件 GitHub地址： 详细用法

用法：

npm 下载 npm install vue-json-pretty --save 项目里引入 import VueJsonPretty from 'vue-json-pretty'; import 'vue-json-pretty/lib/styles.css'; 注册组件 export default { components: { VueJsonPretty } }; template使用 <template> <div> //data可以是请求后端返回的数据 <vue-json-pretty :deep="3" selectableType="single" :showSelectController="true" :highlightMouseoverNode="true" path="res" :data="response" > </vue-json-pretty> </div> </template> <script> import VueJsonPretty from 'vue-json-pretty'; import 'vue-json-pretty/lib/styles.css'; export default { name : 'cluster', components : {VueJsonPretty}, data(){ return{ response: { result: '', data: [ { id: 1, title: 'aaa' }, { id: 2, title: 'bbb' }, { id: 3, title: 'ccc' }, { id: 4, title: 'ddd' } ] }, } } } </script>

效果展示

可能报错的原因 如果有报错的话，看你的项目用的vue的版本(如果用的vue3.x开发的，就使用最新版本，如果用的是vue2.x开发，就使用1.x版本)

如果你用的是vue2的话，就安装1.7.1的版本，即

npm install vue-json-pretty@1.7.1 --save

使用时，引入

import VueJsonPretty from 'vue-json-pretty/lib/vue-json-pretty.js' import 'vue-json-pretty/lib/styles.css';

vue-json-pretty 基本属性

属性说明类型默认值data待美化的源数据，注意不是 JSON 字符串JSON 对象-deep数据深度, 大于该深度的数据将不被展开numberInfinityshowLength是否在数据线闭合的时候展示长度booleanfalseshowLine是否显示缩紧标识线booleantrueshowDoubleQuotes是否展示 key 名的双引号booleantruevirtual是否使用虚拟滚动(大数据量时)booleanfalseitemHeight使用虚拟滚动时，定义每一行高度numberautov-model双向绑定选中的数据层级string, arraystring, arraypath定义最顶层数据层级stringrootpathSelectable定义哪些数据层级是可以被选中的function(path, content)-selectableType定义组件支持的选中方式，默认无选中功能multiple, single-showSelectController是否展示选择控制器booleanfalseselectOnClickNode是否在点击节点的时候触发 v-model 双向绑定booleantruehighlightSelectedNode是否高亮已选项booleantruecollapsedOnClickBrackets是否支持折叠booleantruecustomValueFormatter可以进行值的自定义渲染function(data, key, path, defaultFormatResult)-

vue-json-pretty 事件

事件名说明回调参数click点击某一个数据层级时触发的事件(path, data)changev-model 改变的事件(仅在选择模式下可用)(newVal, oldVal)

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。