vue 使用vue-json-viewer 展示 JSON 格式的数据

npm install vue-json-viewer --save

 <el-button type="primary" @click="previewClick">预览</el-button><el-dialog title="预览" :visible.sync="previewVisible" width="70%"><viewer ref="viewer" style="height: 500px"></viewer></el-dialog>import viewer from './components/viewer.vue'
export default {components: { viewer },methods:{previewClick(){this.previewVisible = truelet list = [{"id": "1","amount": 1,"count": 1,"label": "a"},{"id": "2","amount": 2,"count": 2,"label": "b"},]const str = JSON.stringify(list)this.$nextTick(() => {this.$refs.viewer.jsonStr = str})}}
}

viewer.vue

<template><div class="codeEditBox"><json-viewer:value="JSON.parse(jsonStr)":expand-depth="5"boxedsort:show-array-index="false"copyable><template slot="copy"><i class="el-icon-document-copy" title="复制"></i></template></json-viewer></div>
</template>
<script>
import JsonViewer from 'vue-json-viewer'
export default {components: {JsonViewer,},data() {return {jsonStr: '',}},methods: {},
}
</script>
<style scoped>
.codeEditBox {width: 100%;height: 200px;border: 1px solid #dcdee2;overflow-y: auto;
}
</style>