文章目錄

• • • • 背景
      • 效果預覽
      • 具體實現
      • • 相關依賴
        • 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编辑器组件的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。