Vue JsonView 树形格式化代码插件

 组件代码（临时粘出来）

 <template>
   <div class="bgView">
     <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'">
     <span @click="toggleClose" :class="['angle', innerclosed ? 'closed' : '']" v-if="length"></span>
     <div class="content-wrap">
       <p class="first-line">
         <span v-if="jsonKey" class="json-key">"{{jsonKey}}": </span>
         <span v-if="length">
           {{prefix}}
           {{innerclosed ? ('...' + subfix) : ''}}
           <span  class="json-note">
            {{innerclosed ? (' // count: ' + length) : ''}}
           </span>
         </span>
         <span v-if="!length">{{isArray ? '[]' : '{}'}}</span>
       </p>
       <div v-if="!innerclosed && length" class="json-body">
         <template v-for="(item, index) in items">
           <json-view :closed="closed" v-if="item.isJSON" :key="index" :json="item.value" :jsonKey="item.key"
                      :isLast="index === items.length - 1"></json-view>
           <p class="json-item" v-else :key="index">
             <span class="json-key">
                 {{(isArray ? '' : '"' + item.key + '"')}}
             </span>
             :
             <span class="json-value">
                 {{item.value + (index ===
             items.length - 1 ? '' : ',')}}
             </span>

           </p>
         </template>
         <span v-show="!innerclosed" class="body-line"></span>
       </div>
       <p v-if="!innerclosed && length" class="last-line">
         <span>{{subfix}}</span>
       </p>
     </div>
   </div>
   </div>
 </template>

 <script>
   export default {
     name: 'jsonView',
     props: {
       json: [Object, Array],
       jsonKey: {
         type: String,
         default: ''
       },
       closed: {
         type: Boolean,
         default: false
       },
       isLast: {
         type: Boolean,
         default: true
       },
       fontSize: {
         type: Number,
         default: 18
       }
     },
     created() {
       this.innerclosed = this.closed
       this.$watch('closed', () => {
         this.innerclosed = this.closed
       })
     },
     data() {
       return {
         innerclosed: true
       }
     },
     methods: {
       isObjectOrArray(source) {
         const type = Object.prototype.toString.call(source)
         const res = type === '[object Array]' || type === '[object Object]'
         return res
       },
       toggleClose() {
         if (this.innerclosed) {
           this.innerclosed = false
         } else {
           this.innerclosed = true
         }
       }
     },
     computed: {
       isArray() {
         return Object.prototype.toString.call(this.json) === '[object Array]'
       },
       length() {
         return this.isArray ? this.json.length : Object.keys(this.json).length
       },
       subfix() {
         return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',')
       },
       prefix() {
         return this.isArray ? '[' : '{'
       },
       items() {
         if (this.isArray) {
           return this.json.map(item => {
             const isJSON = this.isObjectOrArray(item)
             return {
               value: isJSON ? item : JSON.stringify(item),
               isJSON,
               key: ''
             }
           })
         }
         const json = this.json
         return Object.keys(json).map(key => {
           const item = json[key]
           const isJSON = this.isObjectOrArray(item)
           return {
             value: isJSON ? item : JSON.stringify(item),
             isJSON,
             key
           }
         })
       }
     }
   }
 </script>

 <style lang="scss">
   .bgView {
     background-color: #fafafa;
   }
   .json-view {
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     white-space: nowrap;
     padding-left: 20px;
     box-sizing: border-box;
     .json-note {
       color: #909399;
     }
     .json-key {
       color: rgb(147, 98, 15);
     }
     .json-value {
       color: rgb(24, 186, 24);
     }
     .json-item {
       margin: 0;
       padding-left: 20px;

     }
     .first-line {
       padding: 0;
       margin: 0;
     }
     .json-body {
       position: relative;
       padding: 0;
       margin: 0;

       .body-line {
         position: absolute;
         height: 100%;
         width: 0;
         border-left: dashed 1px #bbb;
         top: 0;
         left: 2px;
       }
     }
     .last-line {
       padding: 0;
       margin: 0;
     }
     .angle {
       position: absolute;
       display: block;
       cursor: pointer;
       float: left;
       width: 20px;
       text-align: center;
       left: 0;

       &::after {
         content: "";
         display: inline-block;
         width: 0;
         height: 0;
         vertical-align: middle;
         border-top: solid 4px #333;
         border-left: solid 6px transparent;
         border-right: solid 6px transparent;
       }
       &.closed::after {
         border-left: solid 4px #333;
         border-top: solid 6px transparent;
         border-bottom: solid 6px transparent;
       }
     }
   }
 </style>

使用实例

<template>
  <div>
    <JsonView :json="JsonData"></JsonView>
  </div>
</template>

<script>
  import JsonView from '@/components/JsonView'

  export default {
    name: 'test',
    data() {
      return {
        JsonData: {
          'code': 200,
          'message': 'succeed !',
          'data': [
            {
              'uuid': '76254DDB-A8EA-46CB-B3D7-6EEBD13BB2E6',
              'version': 1,
              'code': '401',
              'message': '请求无权限',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'B0415CC2-F0E0-4B0C-A3BA-50ABAEE98BB9',
              'version': 1,
              'code': '500',
              'message': '服务器错误',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'B70692E0-CCB7-4C44-B59B-7B75B16FA9FE',
              'version': 1,
              'code': '200',
              'message': '请求成功',
              'createId': 'dev',
              'createDate': '2018-12-03T15:06:54.717',
              'modifyId': null,
              'modifyDate': null
            },
            {
              'uuid': 'C8A37C2D-0842-423B-AEBA-976C106A3E90',
              'version': 1,
              'code': '202',
              'message': '请求失败',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            }
          ]
        }
      }
    },
    components: { JsonView }
  }
</script>

可传参数:

      json: [Object, Array], // 必传 显示的数据
      closed: { // 是否默认展开
        type: Boolean,
        default: false
      },
      fontSize: { // 文字大小
        type: Number,
        default: 18
      }