Vue页面json格式化插件vue-json-viewer使用

安装vue-json-viewer插件

基于npm的安装：
$ npm install vue-json-viewer --save

基于yarn的安装：
$ yarn add vue-json-viewer

代码中引入

在全局main.js中引入或单独页面script引入：

import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
 
// Import JsonViewer as a Vue.js plugin
Vue.use(JsonViewer)

vue-json-viewer页面使用

<el-dialog :title="infLogTitle" :visible.sync="infLogOpen" width="70%" append-to-body>
  <div class="el-dialog-div">
    <el-row :span="24">
      <el-col :span="12" class="item-box">
        <div>请求数据：</div>
        <json-viewer :value="infLogForm.requestJson" :expand-depth=5 copyable >
          <template v-slot:copy>
            复制
          </template>
        </json-viewer>
      </el-col>
      <el-col :span="12" class="item-box">
        <div>响应数据：</div>
        <json-viewer :value="infLogForm.responseJson" :expand-depth=5 copyable >
          <template v-slot:copy>
            复制
          </template>
        </json-viewer>
      </el-col>
    </el-row>
  </div>
</el-dialog>

注意：jsonData必须为JSON对象

样式：

.el-dialog-div {
  height: 70vh;
  overflow-y: auto;

  .item-label {
    margin: 5px;
  }
  .item-box {
    border: 1px solid #eee;
    padding: 5px;
  }
}

扩展

判断string是否是json格式的字符串

function isJSON(str) {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }
 
        } catch(e) {
            console.log('error：'+str+'!!!' + e);
            return false;
        }
    }
    console.log('It is not a string!')
}

string类型的json字符串，转换为json格式

var obj=JSON.parse(str);