官网地址:https://www.npmjs.com/package/vue-json-viewer
安装
npm:
npm install vue-json-viewer --save
yarn:
yarn add vue-json-viewer
在页面中引入
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
// 以插件的形式引入
Vue.use(JsonViewer)
// 或者注册组件
// components: {JsonViewer}
在样式中使用
在template中插入
<json-viewer :value="jsonData"></json-viewer>
或者带参数
<json-viewer
:value="jsonData"
:expand-depth=5
copyable
boxed
sort></json-viewer>
jsonData 是json数据
jsonData数据
new Vue({
el: '#app',
data() {
return {
jsonData: {
total: 25,
limit: 10,
skip: 0,
links: {
previous: undefined,
next: function () {},
},
data: [
{
id: '5968fcad629fa84ab65a5247',
firstname: 'Ada',
lastname: 'Lovelace',
awards: null,
known: [
'mathematics',
'computing'
],
position: {
lat: 44.563836,
lng: 6.495139
},
bornAt: '1815-12-10T00:00:00.000Z',
diedAt: '1852-11-27T00:00:00.000Z'
}, {
id: '5968fcad629fa84ab65a5246',
firstname: 'Grace',
lastname: 'Hopper',
awards: [
'Defense Distinguished Service Medal',
'Legion of Merit',
'Meritorious Service Medal',
'American Campaign Medal',
],
known: null,
position: {
lat: 43.614624,
lng: 3.879995
},
bornAt: '1815-12-10T00:00:00.000Z',
diedAt: '1852-11-27T00:00:00.000Z'
}
]
}
}
}
})
注意jsonData需要动态赋值
预览效果
参数解释
value - JSON 数据(也可使用v-model)
copyable - 显示复制按钮
sort - 显示之前对键进行排序
expanded - 默认展开视图
timeformat - 自定义时间格式功能