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

加蓓努力我先飞

已于 2023-07-31 16:42:28 修改

阅读量975

点赞数

分类专栏：前端开发文章标签： vue.js json 前端

于 2023-07-31 16:41:34 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/132025371

版权

前端开发专栏收录该内容

93 篇文章 4 订阅

订阅专栏

在这里插入图片描述

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 = true
         let 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"
      boxed
      sort
      :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>