vue插件 JSON 数据树形展示插件

小鱼儿 2023-06-27 03:17 2阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl_size_16_color_FFFFFF_t_70]

### vue-json-pretty ###

*  文档 [https://github.com/leezng/vue-json-pretty/blob/HEAD/README.zh-CN.md][https_github.com_leezng_vue-json-pretty_blob_HEAD_README.zh-CN.md]
 *  [https://www.npmjs.com/package/vue-json-pretty][https_www.npmjs.com_package_vue-json-pretty]

<template>
      <div class="json-view">
        <el-dialog title="数据展示" :visible="dialogVisible" width="50%" @close="handleCancel" >
          <div style="height: 600px; overflow: auto;">
            <vue-json-pretty :path="'res'" :data="app.componentList" :deep="3" :highlight-mouseover-node="true" :show-select-controller="true" :show-length="true" />
          </div>
    
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleCancel">取 消</el-button>
            <el-button v-clipboard:copy="JSON.stringify(app.componentList)" v-clipboard:success="onCopy" v-clipboard:error="onError" size="mini" type="success" >
              复 制
            </el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    <script> import VueJsonPretty from 'vue-json-pretty' export default { name: 'JsonView', inject: ['app'], components: { VueJsonPretty }, props: { dialogVisible: { type: Boolean, default: false } }, methods: { handleCancel() { this.$emit('update:dialogVisible', false) }, onCopy(e) { this.$message.success('JSON数据复制成功，请自行转换。') }, onError() { this.$message({ type: 'warning', message: '复制失败' }) } } } </script>

### vue-json-viewer ###

*  文档 [https://github.com/chenfengjw163/vue-json-viewer/blob/master/README\_CN.md][https_github.com_chenfengjw163_vue-json-viewer_blob_master_README_CN.md]
 *  [https://www.npmjs.com/package/vue-json-viewer][https_www.npmjs.com_package_vue-json-viewer]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200102165025599.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1U2hpWXVl,size_16,color_FFFFFF,t_70
[https_github.com_leezng_vue-json-pretty_blob_HEAD_README.zh-CN.md]: https://github.com/leezng/vue-json-pretty/blob/HEAD/README.zh-CN.md
[https_www.npmjs.com_package_vue-json-pretty]: https://www.npmjs.com/package/vue-json-pretty
[https_github.com_chenfengjw163_vue-json-viewer_blob_master_README_CN.md]: https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md
[https_www.npmjs.com_package_vue-json-viewer]: https://www.npmjs.com/package/vue-json-viewer