vue+element表格使⽤vue-json-viewer实现查看JSON数据效果效果图：
功能：在element弹窗中根据表格⾏查看当前⾏的JSON数据，⾼亮、可折叠、可复制
代码部分：
<el-table-column prop="onlineStatus"
label="操作"
min-width="140">
<template slot-scope="scope">
<el-button @click="w)"
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>
element表格横向滚动条</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>
样式是对弹窗样式的修改，虽然可折叠，但也还是多加了滚动的效果（滚动条隐藏的）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。