前两天干活儿有个需求,在前端需要展示可折叠的Json树,供开发人员查看,这里采用JsonView组件来实现,它是一款用于展示Json的Vue组件,支持大体积的Json文件快速解析渲染,下面记录一下实现过程。
1.首先先下载好JsonView的组件:JsonView.vue,组件代码如下:
<template> <div class="bgView"> <div :class="['json-view', length " :style="'font-size:' + fontSize+'px'"> <span @click="toggleClose" :class="['angle', innerclosed " v-if="length"> </span> <div class="content-wrap"> <p class="first-line"> <span v-if="jsonKey" class="json-key">"{{jsonKey}}": </span> <span v-if="length"> {{prefix}} {{innerclosed "json-note"> {{innerclosed "!length">{{isArray "!innerclosed && length" class="json-body"> <template v-for="(item, index) in items"> <json-view :closed="closed" v-if="item.isJSON" :key="index" :json="item.value" :jsonKey="item.key" :isLast="index === items.length - 1"></json-view> <p class="json-item" v-else :key="index"> <span class="json-key"> {{(isArray "' + item.key + '"')}} </span> : <span class="json-value"> {{item.value + (index === items.length - 1 "!innerclosed" class="body-line"></span> </div> <p v-if="!innerclosed && length" class="last-line"> <span>{{subfix}}</span> </p> </div> </div> </div> </template> <script> export default { name: 'jsonView', props: { json: [Object, Array], jsonKey: { type: String, default: '' }, closed: { type: Boolean, default: false }, isLast: { type: Boolean, default: true }, fontSize: { type: Number, default: 13 } }, created() { this.innerclosed = this.closed this.$watch('closed', () => { this.innerclosed = this.closed }) }, data() { return { innerclosed: true } }, methods: { isObjectOrArray(source) { const type = Object.prototype.toString.call(source) const res = type === '[object Array]' || type === '[object Object]' return res }, toggleClose() { if (this.innerclosed) { this.innerclosed = false } else { this.innerclosed = true } } }, computed: { isArray() { return Object.prototype.toString.call(this.json) === '[object Array]' }, length() { return this.isArray ""; display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: solid 4px #333; border-left: solid 6px transparent; border-right: solid 6px transparent; } .angle.closed::after { border-left: solid 4px #333; border-top: solid 6px transparent; border-bottom: solid 6px transparent; } </style>
2.在需要使用的vue页面中引用JsonView组件
import JsonView from '@/components/JsonView'
3.定义Json数据变量
jsonData:{},
4.页面展示代码
<JsonView :json="jsonData"></JsonView>
5.实现效果如下:
JsonViewAttributes
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Vue中使用JsonView来展示Json树的实例代码”评论...
更新动态
20240626
20240626
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]