VUE+Element UI 展示json数据 [vue-json-viewer]

最新推荐文章于 2024-11-25 13:13:52 发布

我不是程序猿吖

最新推荐文章于 2024-11-25 13:13:52 发布

阅读量3k

点赞数 1

文章标签： vue.js ui json

本文链接：https://blog.youkuaiyun.com/weixin_60457220/article/details/131249542

版权

1.安装组件`vue-json-viewer`

npm install vue-json-viewer --save

2.在main.js中引入并使用`vue-json-viewer`

import JsonViewer from 'vue-json-viewer';
Vue.use(JsonViewer);

3.在.vue文件中使用

<el-button size="mini" plain  type="primary" 
        @click="openJsonDetail(传入json数据)">JSON展示</el-button>

<!-- JSON详情窗口 -->
    <el-dialog title="JSON信息" :visible.sync="openJson" 
                                width="500px" append-to-body>
       <JsonViewer
            :expand-depth=5
            copyable
            boxed
            sort
            :value="jsonStr"
      />
    </el-dialog>

 data() {
    return {
      //是否打开JSON窗口
      openJson:false,
      //JSON
      jsonStr:{},
            }
        }

/*  打开JSON窗口 */
    openJsonDetail(obj){
      if(obj){
        this.jsonStr = JSON.parse(obj);
        this.openJson = true;
      }
      
    }