1. 安装 vue-json-editor

npm install vue-json-editor --save
复制

2. 可配置说明

v-model：bind the [json object];
:show-btns: boolean, show the save button, default: true ;
:expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false;
:mode: string, default: tree; 
:lang: string, default: en; 
@json-change: on json changed; 
@json-save: on json save; 
@has-error: on error;
复制

3. 在 vue 中使用 vue-json-editor

<template>
  <div class = "routeManagement">
    <vue-json-editor 
      v-model="routeJson" :showBtns="true" lang="zh"
      @json-change="onJsonChange" @json-save = "onJsonSave"/>
  </div>
</template>

<script>
// 引入vue-json-editor模块
import vueJsonEditor from 'vue-json-editor'
export default {
  data () {
    return{
      // 可使用 JSON.parse() JSON.stringify() 转化 json 数据
      json: {
        msg: 'demo of jsoneditor'
      }
    }
  },
  components: {
    vueJsonEditor
  },
  methods: {
    onJsonChange () { // 数据改变时触发
    },
    onJsonSave(){ // 点击保存触发
    }
  },
}
</script>

<style lang="scss" scoped>
.routeManagement{
  width:98%;
  margin:16px auto;
  /deep/.jsoneditor-vue{
    height:700px;
  }
  /deep/.json-save-btn{
    cursor: pointer;
  }
}
</style>
复制

3. 效果图

推荐阅读： vue-json-views (一款 json 数据展示插件)

推荐内容