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>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-icon-close:before {
  color: black;
}
::v-deep .jv-container .jv-code.boxed {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow: -moz-scrollbars-none;
}
::v-deep .jv-container .jv-code.boxed::-webkit-scrollbar {
  display: none;
}
</style>
    

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