1.安装组件vue-json-viewer

npm install vue-json-viewer --save

2.在main.js中引入并使用vue-json-viewer

import JsonViewer from 'vue-json-viewer';
Vue.use(JsonViewer);

3.在.vue文件中使用

<el-button size="mini" plain  type="primary" 
        @click="openJsonDetail(传入json数据)">JSON展示</el-button>

<!-- JSON详情窗口 -->
    <el-dialog title="JSON信息" :visible.sync="openJson" 
                                width="500px" append-to-body>
       <JsonViewer
            :expand-depth=5
            copyable
            boxed
            sort
            :value="jsonStr"
      />
    </el-dialog>

 data() {
    return {
      //是否打开JSON窗口
      openJson:false,
      //JSON
      jsonStr:{},
            }
        }

/*  打开JSON窗口 */
    openJsonDetail(obj){
      if(obj){
        this.jsonStr = JSON.parse(obj);
        this.openJson = true;
      }
      
    }