作者：烦了_12664 | 来源：互联网 | 2023-07-29 19:07
前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一下实现过程。
1.首先先下载好JsonView的组件：JsonView.vue，组件代码如下：
"{{jsonKey}}":
{{prefix}}
{{innerclosed ? ('...' + subfix) : ''}}
{{innerclosed ? (' // count: ' + length) : ''}}
{{isArray ? '[]' : '{}'}}
{{(isArray ? '' : '"' + item.key + '"')}}
:
{{item.value + (index === items.length - 1 ? '' : ',')}}
{{subfix}}
2.在需要使用的vue页面中引用JsonView组件
import JsonView from '@/components/JsonView'
3.定义Json数据变量
4.页面展示代码
5.实现效果如下：
JsonViewAttributes
京公网安备 11010802041100号