实现的效果：
image.png
- 安装vue-json-viewer
npm install vue-json-viewer --save
- 全局引入或单页面引入
// main.js全局引入
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)
// vue单页面文件中引入
<script>
// 引入组件
import JsonViewer from 'vue-json-viewer'
export default {
// 注册组件
components:{
JsonViewer
}
}
</script>
- 使用插件
<json-viewer :value="dataList" copyable theme="my-awesome-json-theme"></json-viewer>
value 代表显示的JSON数据；copyable 表示可以复制；
image.png
