vue json格式化校验，一行数据变成有层级的数据结构，vue-json-editor json编辑器

1.安装插件

npm install vue-json-editor --save

2.使用

<template>
  <div class="menu2">
    <!--:show-btns="true"  // 是否显示保存按钮 -->
    <!--  :mode="'code'" // 默认编辑模式 -->
    <!-- lang="zh"  // 显示中文，默认英文 -->
     <!-- @json-change="onJsonChange"  // 数据改变事件 -->
    <vue-json-editor
    class="json"
    v-model="json" 
    :show-btns="true"
    :mode="'code'" 
    lang="zh" 
    @json-change="onJsonChange" 
    @json-save="onJsonSave" 
    @has-error="onError"></vue-json-editor>
  </div>
</template>
 
<script>
  import vueJsonEditor from 'vue-json-editor'
  export default {
    data () {
      return {
        json: {
          msg: {"code":200000,"msg":"操作成功","data":{"records":[{"id":30000272,"configName":"AAAAAAA","configKey":"BBBBBBB","configValue":"CCCCCCC","configType":"int","configStatus":1,"configDesc":"aaadaad","configBus":"1","configService":null,"createPerson":"","updatePerson":"","createTime":"2021-03-11 10:50:06","updateTime":"2021-03-12 10:06:52"},{"id":30000271,"configName":"11111","configKey":"1111","configValue":"2021-03-10","configType":"Time","configStatus":0,"configDesc":"1111111","configBus":"0","configService":null,"createPerson":"","updatePerson":"","createTime":"2021-03-11 10:06:54","updateTime":"2021-03-11 10:07:17"},{"id":30000269,"configName":"测试1","configKey":"测试1","configValue":"adasdad","configType":"Int","configStatus":0,"configDesc":"aa","configBus":"0","configService":null,"createPerson":"","updatePerson":"","createTime":"2021-03-08 16:38:04","updateTime":"2021-03-08 16:56:36"},{"id":30000266,"configName":"88","configKey":"88aaa","configValue":"88dasdssa","configType":"Int","configStatus":0,"configDesc":"88","configBus":"0","configService":null,"createPerson":"","updatePerson":"","createTime":"2021-03-08 14:08:40","updateTime":"2021-03-08 16:40:42"},{"id":30000264,"configName":"11","configKey":"111","configValue":"sss","configType":"Time","configStatus":1,"configDesc":"111","configBus":"0","configService":null,"createPerson":"","updatePerson":null,"createTime":"2021-03-08 13:56:31","updateTime":null},{"id":30000254,"configName":"666","configKey":"666","configValue":"666","configType":"String","configStatus":1,"configDesc":"666","configBus":"0","configService":null,"createPerson":"wangxing","updatePerson":"","createTime":"2021-03-02 18:04:46","updateTime":"2021-03-08 11:00:55"},{"id":30000252,"configName":"测试系统参数添aaa","configKey":"定时任务处理aaa","configValue":"dasdsadsad","configType":"Time","configStatus":0,"configDesc":"描述aaa","configBus":"1","configService":null,"createPerson":"wangxing","updatePerson":"","createTime":"2021-03-02 17:45:22","updateTime":"2021-03-08 16:42:34"},{"id":30000251,"configName":"测试系统参数添加修改12","configKey":"定时任务处理时间添加1","configValue":"2","configType":"int","configStatus":1,"configDesc":"描述","configBus":"1","configService":null,"createPerson":"wangxing","updatePerson":"wangxing","createTime":"2021-03-02 17:23:46","updateTime":"2021-03-02 17:28:34"},{"id":30000246,"configName":"测试系统参数添加修改","configKey":"定时任务处理时间","configValue":"2","configType":"int","configStatus":1,"configDesc":"描述","configBus":"0","configService":null,"createPerson":"wangxing","updatePerson":"wangxing","createTime":"2021-03-02 16:01:06","updateTime":"2021-03-02 16:02:33"},{"id":30000149,"configName":"8888","configKey":"DEFUALT_RESOURCE_AUDIT_GROUPS","configValue":"10010293","configType":"String","configStatus":1,"configDesc":"默认资源审核组(英文逗号分隔)","configBus":"0","configService":null,"createPerson":"wangxing","updatePerson":"","createTime":"2021-03-02 02:02:22","updateTime":"2021-03-04 11:23:43"}],"total":104,"size":10,"current":1,"orders":[],"optimizeCountSql":true,"hitCount":false,"searchCount":true,"pages":11}},
        }
      }
    },
 
    components: {
      vueJsonEditor
    },
 
    methods: {
      onJsonChange (value) {
            console.log('value:', value);
        },
      onJsonSave (value) {
            console.log('value:', value);
        },
       onError (value) {
            console.log('value:', value);
        }
    }
  }
</script>
<style scoped lang="scss">
.menu2{
    margin: 50px;
    .json{
        width: 500px;
        ::v-deep .jsoneditor-vue{
            height: 70vh;
        }
    }
}
</style>

3.效果