vue json可视化编辑器 vue-json-editor

安装插件

npm install vue-json-editor --save

或者 

yarn add vue-json-editor

使用方法

<template>
        <vue-json-editor
        v-model="resultInfo"
        :showBtns="false"    //是否展示保存按钮
        :mode="'code'"   //默认模式
        lang="zh"  //中文
        @json-change="onJsonChange"  //有改变时，调用的方法
        @json-save="onJsonSave"  //保存时，调用的方法
        :style="style"//调整框高度
        />
</template>
<script>
  import vueJsonEditor from 'vue-json-editor'

  export default {
    data () {
      return {
        style: 'height:' + (document.body.clientHeight - 60) + 'px',
        resultInfo: {
              "userId": "123",
              "realName": "二狗",
              "gradeCode": "22",
              "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>