json可视化编辑器（一）vue-json-editor

最新推荐文章于 2024-08-21 08:36:40 发布

张小胖、

最新推荐文章于 2024-08-21 08:36:40 发布

阅读量601

点赞数

本文链接：https://blog.csdn.net/qiguniang_/article/details/128843650

版权

本文档介绍了如何在Vue项目中安装和使用vue-json-editor插件，展示了一个包含多个结构（如树结构、代码结构等）的示例，并提供了详细的组件使用方法和事件监听。同时，给出了json-editor的中文文档链接，但未提及如何禁止编辑功能，适用于需要展示不可修改JSON数据的场景。

摘要由CSDN通过智能技术生成

一、功能展示

图一：树结构

图二：代码结构

图三：form结构

图四：text结构

图五： view结构

二、安装插件

1 npm install vue-json-editor --save

三、使用方法

 1 <template>
 2         <vue-json-editor
 3         v-model="resultInfo"  
 4         :showBtns="false"    //是否展示保存按钮
 5         :mode="'code'"   //默认模式
 6         lang="zh"  //中文
 7         @json-change="onJsonChange"  //有改变时，调用的方法
 8         @json-save="onJsonSave"  //保存时，调用的方法
 9         />
10 </template>
11 <script>
12   import vueJsonEditor from 'vue-json-editor'
13  
14   export default {
15     data () {
16       return {
17         resultInfo: {
18               "userId": "1111111129ac7325-30da-4e6a-8a00-9699820fc04a",
19               "realName": "小雪18",
20               "gradeCode": "166",
21               "provinceCode": "110000",
22               "cityCode": {
23                 "test1": "test1",
24                 "test2": "test2"
25               },
26               "schoolId": 21,
27               "schoolLevel": 1,
28               "schoolName": "北京第二实验小学朝阳学校"
29             },
30       }
31     },
32  
33     components: {
34       vueJsonEditor
35     },
36  
37     methods: {
38       onJsonChange (value) {
39             console.log('value:', value);
40         },
41       onJsonSave (value) {
42             console.log('value:', value);
43         },
44        
45     }
46   }
47 
48 </script>
49 
50 <style>
51   
52    /* jsoneditor右上角默认有一个链接,加css去掉了 */
53   .jsoneditor-poweredBy{
54      display: none;
55   }
56 </style>