官网地址: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中插入
或者带参数
jsonData 是json数据
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 - 自定义时间格式功能