vue json可视化编辑器 vue-json-editor

seasideX

于 2020-11-23 18:23:28 发布

阅读量3.3k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/seasidexin/article/details/110004142

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中安装和使用vue-json-editor插件，该插件用于显示和编辑JSON数据。通过示例代码展示了组件的使用方法，包括设置初始数据、监听数据变化和保存操作，并提供了自定义样式以适应页面布局。同时，文章还提供了CSS代码去除jsoneditor右上角的链接展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件

npm install vue-json-editor --save

或者 

yarn add vue-json-editor

使用方法

<template>
        <vue-json-editor
        v-model="resultInfo"
        :showBtns="false"    //是否展示保存按钮
        :mode="'code'"   //默认模式
        lang="zh"  //中文
        @json-change="onJsonChange"  //有改变时，调用的方法
        @json-save="onJsonSave"  //保存时，调用的方法
        :style="style"//调整框高度
        />
</template>
<script>
  import vueJsonEditor from 'vue-json-editor'

  export default {
    data () {
      return {
        style: 'height:' + (document.body.clientHeight - 60) + 'px',
        resultInfo: {
              "userId": "123",
              "realName": "二狗",
              "gradeCode": "22",
              "provinceCode": "110000",
              "cityCode": {
                "test1": "test1",
                "test2": "test2"
              },
              "schoolId": 21,
              "schoolLevel": 1,
              "schoolName": "南京第二实验小学"
            },
      }
    },

    components: {
      vueJsonEditor
    },

    methods: {
      onJsonChange (value) {
            console.log('value:', value);
        },
      onJsonSave (value) {
            console.log('value:', value);
        },

    }
  }

</script>

<style>

   /* jsoneditor右上角默认有一个链接,加css去掉了 */
  .jsoneditor-poweredBy{
     display: none;
  }
</style>