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

一、 功能展示

 

图一：树结构

图二：代码结构

图三：form结构

图四：text结构

图五： view结构

二、安装插件

npm install vue-json-editor --save

三、使用方法

<template>
        <vue-json-editor
        v-model="resultInfo"  
        :showBtns="false"    //是否展示保存按钮
        :mode="'code'"   //默认模式
        lang="zh"  //中文
        @json-change="onJsonChange"  //有改变时，调用的方法
        @json-save="onJsonSave"  //保存时，调用的方法
        />
</template>
<script>
  import vueJsonEditor from 'vue-json-editor'
 
  export default {
    data () {
      return {
        resultInfo: {
              "userId": "1111111129ac7325-30da-4e6a-8a00-9699820fc04a",
              "realName": "小雪18",
              "gradeCode": "166",
              "provinceCode": "110000",
              "cityCode": {
                "test1": "test1",
                "test2": "test2"
              },
              "schoolId": 21,
              "schoolLevel": 1,
              "schoolName": "北京第二实验小学朝阳学校"
            },
      }
    },
 
    components: {
      vueJsonEditor
    },
 
    methods: {
      onJsonChange (value) {
            console.log('value:', value);
        },
      onJsonSave (value) {
            console.log('value:', value);
        },
       
    }
  }

</script>

<style>
  
   /* jsoneditor右上角默认有一个链接,加css去掉了 */
  .jsoneditor-poweredBy{
     display: none;
  }
</style>

四、补充说明

4.1、json-editor中文文档：https://www.cnblogs.com/handk/p/4766271.html

4.2、目前不知道怎么配置可以禁止修改，因为我的页面需要只展示的地方。

你传递出去的温暖，终将以另一种形式回到你身上～