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、目前不知道怎么配置可以禁止修改，因為我的頁面需要只展示的地方。

 

你傳遞出去的溫暖，終將以另一種形式回到你身上～