精华内容
下载资源
问答
  • vue-json-pretty 是一个将 JSON 字符串渲染成树形结构的 Vue 组件 GitHub地址: 详细用法 用法: npm 下载 npm install vue-json-pretty --save 项目里引入 import VueJsonPretty from 'vue-json-pretty'; ...

    vue-json-pretty

    是一个将 JSON 字符串渲染成树形结构的 Vue 组件
    GitHub地址: 详细用法

    用法:

    1. npm 下载
    npm install vue-json-pretty --save
    
    1. 项目里引入
    import VueJsonPretty from 'vue-json-pretty';
    import 'vue-json-pretty/lib/styles.css';
    
    1. 注册组件
    export default {
      components: {
        VueJsonPretty
      }
    };
    
    1. template使用
    <template>
      <div>
        //data可以是请求后端返回的数据
        <vue-json-pretty :deep="3" selectableType="single" :showSelectController="true" :highlightMouseoverNode="true"
    path="res" :data="response" > </vue-json-pretty>
      </div>
    </template>
    <script>
      import VueJsonPretty from 'vue-json-pretty';
      import 'vue-json-pretty/lib/styles.css';
     
      export default {
        name : 'cluster',
        components : {VueJsonPretty},
        data(){
            return{
            	 response: {
                  result: '',
                  data: [
                    {
                      id: 1,
                      title: 'aaa'
                    },
                    {
                      id: 2,
                      title: 'bbb'
                    },
                    {
                      id: 3,
                      title: 'ccc'
                    },
                    {
                      id: 4,
                      title: 'ddd'
                    }
                  ]
                },
            }
        }
      }
    </script>
    
    1. 效果展示
      在这里插入图片描述

    2. 可能报错的原因
      如果有报错的话,看你的项目用的vue的版本(如果用的vue3.x开发的,就使用最新版本,如果用的是vue2.x开发,就使用1.x版本)

    如果你用的是vue2的话,就安装1.7.1的版本,即

    npm install vue-json-pretty@1.7.1 --save
    

    使用时,引入

     import VueJsonPretty from 'vue-json-pretty/lib/vue-json-pretty.js'
     import 'vue-json-pretty/lib/styles.css';
    

    vue-json-pretty 基本属性

    属性说明类型默认值
    data待美化的源数据,注意不是 JSON 字符串JSON 对象-
    deep数据深度, 大于该深度的数据将不被展开numberInfinity
    showLength是否在数据线闭合的时候展示长度booleanfalse
    showLine是否显示缩紧标识线booleantrue
    showDoubleQuotes是否展示 key 名的双引号booleantrue
    virtual是否使用虚拟滚动(大数据量时)booleanfalse
    itemHeight使用虚拟滚动时,定义每一行高度numberauto
    v-model双向绑定选中的数据层级string, arraystring, array
    path定义最顶层数据层级stringroot
    pathSelectable定义哪些数据层级是可以被选中的function(path, content)-
    selectableType定义组件支持的选中方式,默认无选中功能multiple, single-
    showSelectController是否展示选择控制器booleanfalse
    selectOnClickNode是否在点击节点的时候触发 v-model 双向绑定booleantrue
    highlightSelectedNode是否高亮已选项booleantrue
    collapsedOnClickBrackets是否支持折叠booleantrue
    customValueFormatter可以进行值的自定义渲染function(data, key, path, defaultFormatResult)-

    vue-json-pretty 事件

    事件名说明回调参数
    click点击某一个数据层级时触发的事件(path, data)
    changev-model 改变的事件(仅在选择模式下可用)(newVal, oldVal)
    展开全文
  • vue展示json数据,vue-json-viewer的使用

    千次阅读 2021-01-19 09:30:05
    yarn add vue-json-viewer 二、引入项目 src目录下plugins下的jsonViewer.js文件 import Vue from "vue"; import JsonViewer from "vue-json-viewer"; Vue.use(JsonViewer); 在 main.js文件 中引入 import "./...

    一、安装

     yarn add vue-json-viewer
    

    二、引入项目

    src目录下plugins下的jsonViewer.js文件

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

    main.js文件 中引入

    import "./plugins/jsonViewer.js";
    

    三、在组件中使用

    test.vue文件

    <template>
      <div class="test-json-viewer">
        <json-viewer
          :value="jsonData"
          :expand-depth="5"
          copyable
          boxed
          sort
        ></json-viewer>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          jsonData: [
            {
              AGE: 22,
              BIRTHDAY: "1999-12-26",
              GENDER: 1
            },
            {
              AGE: 21,
              BIRTHDAY: "2000-12-6",
              GENDER: 2
            }
          ]
        };
      }
    };
    </script>
    

    效果如图:

    在这里插入图片描述

    更多使用,参考:vue-json-viewer

    展开全文
  • npm i vue-json-views <template> <div> <json-view :data="data" /> </div> </template> <script> import jsonView from 'vue-json-views' export default { components...
    npm i vue-json-views
    
    <template>
      <div>
          <json-view :data="data" />
      </div>
    </template>
    
    <script>
    import jsonView from 'vue-json-views'
    export default {
      components: {
        jsonView
      },
      data() {
        return {
          data:
            '{"User":{"ID":0,"SectorType":3,"Pieces":[{"Piece":{"Size":34359738368,"PieceCID":{"/":"baga6ea4seaqao7s73y24kcutaosvacpdjgfe5pw76ooefnyqw4ynr3d2y6x2mpq"}},"DealInfo":null}]}}'
        }
      },
      methods: {
      },
      created() {
        this.data = JSON.parse(this.data)
      }
    }
    </script>
    

    效果如下:
    在这里插入图片描述
    更多配置属性请参考npm
    链接: https://www.npmjs.com/package/vue-json-views.

    展开全文
  • vue实现Json格式数据展示

    千次阅读 2021-05-26 14:23:22
    vuejsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示 <template> <div class="bgView">...

    vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下

    
    JSON.stringify(obj, null, 4) 可以美化json数据的显示
    
    <span class="light">要高亮的内容</span> 在json数据中,如果有需要高亮的内容,用以上标签包起来(这个要处理数据实现了,组件里高亮样式可以根据需要自己修改)
    <template>
        <div class="bgView">
            <div :class="['json-view', length ? 'closeable' : '']" :style="'font-size:' + fontSize+'px'">
                <span @click="toggleClose" :class="['angle', innerclosed ? 'closed' : '']" v-if="length"></span>
                <div class="content-wrap">
                    <p class="first-line">
                        <span v-if="jsonKey" class="json-key">"{{jsonKey}}": </span>
                        <span v-if="length" @click="toggleClose" style="cursor: pointer;">
                           {{prefix}}
                           {{innerclosed ? ('... ' + subfix) : ''}}
                            <!-- <span class="json-note">
                           {{innerclosed ? (' // count: ' + length) : ''}}
                            </span> -->
                        </span>
                        <span v-if="!length">{{isArray ? '[]' : '{}'}}</span>
                    </p>
                    <div v-if="!innerclosed && length" class="json-body">
                        <template v-for="(item, index) in items">
                            <json-view v-if="item.isJSON"
                                    :closed="closed"
                                    :key="index"
                                    :json="item.value"
                                    :jsonKey="item.key"
                                    :depth="depth+1"
                                    :expandDepth="expandDepth"
                                    :isLast="index === items.length - 1"></json-view>
                            <p v-else class="json-item" :key="index">
                                <span class="json-key">
                                {{(isArray ? '' : '"' + item.key + '":')}}
                                </span>
                                <span class="json-value" v-html="item.value + (index === items.length - 1 ? '' : ',')"/>
                            </p>
                        </template>
                        <!--                    <span v-show="!innerclosed" class="body-line"></span>-->
                    </div>
                    <p v-if="!innerclosed && length" class="last-line">
                        <span>{{subfix}}</span>
                    </p>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {
            name: 'jsonView',
            props: {
                json: [Object, Array],
                jsonKey: {
                    type: String,
                    default: ''
                },
                closed: {
                    type: Boolean,
                    default: true
                },
                isLast: {
                    type: Boolean,
                    default: true
                },
                fontSize: {
                    type: Number,
                    default: 13
                },
                expandDepth: {
                    type: Number,
                    default: 0
                },
                depth: {
                    type: Number,
                    default: 0
                }
            },
            created() {
                this.innerclosed = !this.closed ? this.closed : this.depth >= this.expandDepth
                this.$watch('closed', () => {
                    this.innerclosed = this.closed
                })
            },
            data() {
                return {
                    innerclosed: true
                }
            },
            methods: {
                isObjectOrArray(source) {
                    const type = Object.prototype.toString.call(source)
                    const res = type === '[object Array]' || type === '[object Object]'
                    return res
                },
                toggleClose() {
                    if (this.innerclosed) {
                        this.innerclosed = false
                    } else {
                        this.innerclosed = true
                    }
                }
            },
            computed: {
                isArray() {
                    return Object.prototype.toString.call(this.json) === '[object Array]'
                },
                length() {
                    return this.isArray ? this.json.length : Object.keys(this.json).length
                },
                subfix() {
                    return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',')
                },
                prefix() {
                    return this.isArray ? '[' : '{'
                },
                items() {
                    if (this.isArray) {
                        return this.json.map(item => {
                            const isJSON = this.isObjectOrArray(item)
                            return {
                                value: isJSON ? item : JSON.stringify(item),
                                isJSON,
                                key: ''
                            }
                        })
                    }
                    const json = this.json
                    return Object.keys(json).map(key => {
                        const item = json[key]
                        const isJSON = this.isObjectOrArray(item)
                        return {
                            value: isJSON ? item : JSON.stringify(item),
                            isJSON,
                            key
                        }
                    })
                }
            }
        }
    </script>
    <style>
        .bgView {
            background-color: #efefef;
            font-family: NotoSansCJKkr;
        }
    
        .json-view {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            /* white-space: nowrap; */
            padding: 0 20px;
            box-sizing: border-box;
            line-height: 30px;
        }
    
        .json-note {
            color: #909399;
        }
    
        .json-key {
            color: #333333;
        }
    
        .json-value {
            color: #333333;
        }
    
        .json-item {
            margin: 0;
            padding-left: 20px;
        }
    
        .first-line {
            padding: 0;
            margin: 0;
        }
    
        .json-body {
            position: relative;
            padding: 0;
            margin: 0;
        }
    
        .json-body .body-line {
            position: absolute;
            height: 100%;
            width: 0;
            border-left: dashed 1px #bbb;
            top: 0;
            left: 2px;
        }
    
        .last-line {
            padding: 0;
            margin: 0;
        }
    
        .angle {
            position: absolute;
            display: block;
            cursor: pointer;
            float: left;
            width: 20px;
            text-align: center;
            left: 0;
        }
    
        .angle::after {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            vertical-align: middle;
            border-top: solid 4px #333;
            border-left: solid 6px transparent;
            border-right: solid 6px transparent;
        }
    
        .angle.closed::after {
            border-left: solid 4px #333;
            border-top: solid 6px transparent;
            border-bottom: solid 6px transparent;
        }
    
        .light {
            color: #0595ff;
        }
    </style>

     

    展开全文
  • Vue展示JSON字符串

    2021-06-06 16:49:23
    Vue展示JSON字符串 第一步: 安装 vue-json-viewer npm install vue-json-viewer --save // mac 电脑前面加sudo 第二步:在使用页面引入、注册 import JsonViewer from "vue-json-viewer"; // components: { ...
  • import JsonViewer from 'vue-json-viewer' import Vue from 'vue' Vue.use(JsonViewer) data() { return { jsonData: { id: '5968fcad629fa84ab65a5247', firstname: 'Ada', lastname: 'Lovelace', awards: null, ...
  • 前端VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出 文章目录前端VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出 好用vue-json-excel 将后台返回的json以excel表格形式导出
  • 通过函数 syntaxHighlight 使用html标签包装json数据,并添加样式 完整范例代码 <template> <div style="width: 300px;"> <pre v-html="formattedJSON"></pre> </div> </...
  • 在解析JSON数据时,使用的v-html ,不能自己换行,因数据是pre标签写的,当不换行时,会截断数据,添加了一行这个代码,就可以正常显示 父级下 *{white-space: pre-wrap;} 父级下 *{white-space: pre-wrap;} white-...
  • vue3.x显示json数据组件-vue3-json-viewer

    千次阅读 2021-01-28 02:36:53
    简单易用的json内容展示组件,适配vue3和vite。 在使用vue3+vite开发时,发现需要用到显示json数据组件,发现vue-json-viewer只能兼容vue2,于是花了一个小时,重写的vue3的适配。 原作者:github 代码仓库 GitHub ...
  • 后端需要格式化显示一串json,搜了一下有一些公共组件,vue-json-viewer等等,在开发环境下展示没问题,但一发布整个弹窗都不显示了,提示什么组件异步引入错误。 折腾了好一会,发现在内容外面括上 <pre><...
  • 最近项目上有个需求,就是在前端显示json格式的数据,并且提供展开和收起的按钮。先看一下最终完成的效果吧。...import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer) 三、使用 <json-viewer
  • 将string类型的json字符串,以json格式展示 利用vue-json-viewer插件,利用这个插件,可方便快速实现 高亮,JSON折叠,copy 三种功能 !!! 官网地址:https://www.npmjs.com/package/vue-json-viewer 安装vue-json...
  • 参考:VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出 一、安装vue-json-excel npm install vue-json-excel -S 二、main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('download...
  • 这里需要先安装vue-json-viewer插件 官网地址:https://www.npmjs.com/package/vue-json-viewer 代码部分: <el-table-column prop="onlineStatus" label="操作" min-width="140"> <
  • import JsonViewer from 'vue-json-viewer' //按照数据的结构去展示 Vue.use(JsonViewer) 就可以直接使用了 <json-viewer :value="tableData" :expand-depth="2" copyable boxed sort></json-viewer> ...
  • vuejson处理方法

    千次阅读 2021-01-14 14:56:48
    json后端给我的数据,现在要将 标准陪练-5节 这条数据不展示。我的想法第一想法是要么隐藏,要么处理json删除这条数据。我用delete,但是发现原json长度不变只是变空了,而且在v-for渲染的时候报错了{{item.lesson_...
  • vuejson数据格式化

    2021-09-08 15:44:45
    项目开发过程遇到这样的需求,就是在页面上需要对后端返回的json数据进行格式化显示,用到了一个插件:vue-json-viewer,这是官方文档https://www.npmjs.com/package/vue-json-viewer。 (1)安装 npm install vue-...
  • 最近写一个报名的小程序后台,需要导出页面表格为excel,实现这个功能所以记录一下:目前大多数采取的都是 xlsx ,我这里使用的是vue-json-excel,相对来说更容易上手实现效果。 安装依赖 npm install vue-json-...
  • 效果: 方法: ...import JsonViewer from "vue-json-viewer" 第二步:定义组件 components: { JsonViewer, } 第三部使用: <json-viewer :value="logDetail"></json-viewer> 里面的value
  • json代码高亮显示插件vue-json-pretty

    千次阅读 2021-01-03 22:46:35
    vue-json-pretty是用来格式化展示json数据的 GitHub : vue-json-pretty的详细用法 用法 npm下载 npm install vue-json-pretty --save 引入 import VueJsonPretty from 'vue-json-pretty'; import 'vue-json-...
  • 在css添加display: none把powered by ace隐藏掉 div.jsoneditor-menu a.jsoneditor-poweredBy { font-size: 8pt; position: absolute; right: 0; top: 0; display: none; }
  • vue项目json格式化显示

    2021-12-01 17:36:51
    1、在项目开发中遇到json数据展示 2、利用函数进行json格式化 transitionJsonToString(jsonObj, callback) { // 转换后的jsonObj受体对象 var _jsonObj = null; // 判断传入的jsonObj对象是不是字符串,如果是...
  • 1、vue-json-pretty 文档: https://www.npmjs.com/package/vue-json-pretty 安装: npm install vue-json-pretty --save 使用: 效果图(成对括号有对齐线,数据类型不同颜色标识,点击括号可展开和收缩): 2、vue...
  • npm install vue-json-viewer --save 二、组件中引入 <script> import JsonViewer from 'vue-json-viewer' export default { components:{ JsonViewer } } </script> 三、示例 <template> &...
  • 本文实例讲述了Vue加载json文件的方法。分享给大家供大家参考,具体如下:一、在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版):var appData = require('../address.json'); // 引入...
  • 初学前端,用的架子是 vue+element ,目前有个需求,想将string类型的json字符串,以json格式展示。 利用vue-json-viewer插件,利用这个插件,可方便快速实现 高亮,JSON折叠,copy 三种功能 !!! 官网地址:...
  • npm install --save vue-lottie 页面引用: import lottie from 'vue-lottie'; //注册 components: { lottie }, 页面代码: <lottie :options="defaultOptions" :height="380" :width="200" v-on:animCreated...
  • 开发背景:项目开发过程中遇到展示json的场景,且json文件体积过大,小则几百kb,也尝试了已经开源的部分组件,但由于节点过多,渲染速度过慢,无法使用,已有项目技术选型为vue,无法再使用react相关技术,所以考虑...
  • vue3中json编辑器

    2021-11-12 14:14:41
    vue3的第三方插件 实现json编辑器 安装依赖 npm i vue3-ace-editor 引入 import {reactive,defineComponent} from 'vue' import {VAceEditor} from 'vue3-ace-editor'; import "ace-builds/webpack-resolver...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,480
精华内容 9,792
关键字:

vue展示json

vue 订阅