Vue-JSON编辑器组件的简单使用

文章目录

• • • • 背景
      • 效果预览
      • 具体实现
      • • 相关依赖
        • Vue部分
        • Js部分

背景

​ 有些时候我们系统的配置、为了方便会以JSON的形式保存使用，或者其他需要修改JSON的场景，一款方便好用的编辑器就显得很重要了，本文采用的是vue-json-editor组件。

效果预览

​ 可以看到数据层级非常清晰，还可以选择对齐方式、切换文本、表单、树形等。

具体实现

相关依赖

"vue-json-editor": "^1.4.3"

Vue部分

<el-form-item label="数据内容" prop="configContent"><vue-json-editorstyle="height: 600px"v-model="jsonEditorValue":showBtns="false":mode="'code'"lang="zh"/> </el-form-item>

Js部分

import vueJsonEditor from 'vue-json-editor'components: { vueJsonEditor }// 这里将JSON对象转换为JSON字符串 let jsonStr = JSON.stringify(this.jsonEditorValue)/** 判断最终保存数据是否为正确的JSON格式 */ isJson(str) {if (typeof str == 'string') {try {let obj = JSON.parse(str)return !!(typeof obj == 'object' && obj)} catch (e) {console.log('error：' + str + '!!!' + e)return false}}console.log('It is not a string!') }

总结

以上是生活随笔为你收集整理的Vue-JSON编辑器组件的简单使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。