vue+element表格使用vue-json-viewer实现查看JSON数据效果

效果图：

功能：在element弹窗中根据表格行查看当前行的JSON数据，高亮、可折叠、可复制

这里需要先安装vue-json-viewer插件，官网地址： https://www.npmjs.com/package/vue-json-viewer

代码部分：

<el-table-column prop="onlineStatus"
                         label="操作"
                         min-width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="info"
                       :size="$formSize"
                       icon="el-icon-document">详情el-button>
          template>
el-table-column>
        
<el-dialog title="设备日志"
                 :visible.sync="show"
                 width="40%">
        <json-viewer :value="jsonData"
                     :expand-depth=5
                     copyable
                     boxed
                     sort>json-viewer>
el-dialog>

<script>
export default {
 data () {
    return {
      show: false,
      jsonData: ''
    };
    },
    methods: {
    // 详情
    handleClick (row) {
      this.show = true
      this.jsonData = JSON.parse(row.jsonData)
      //数据是string类型的需要用到JSON.parse(object)将string类型转换为JSON类型
      //row.jsonData的jsonData是后台接口数据所提供的，this.jsonData是容器，用来实现数据绑定显示的:value="jsonData"
    },
 }
 </script>

样式是对弹窗样式的修改，虽然可折叠，但也还是多加了滚动的效果（滚动条隐藏的）