使用組件

標簽

<div class="editor-container"><json-editor ref="jsonEditor" v-model="value" /></div>

style

.editor-container{position: relative;height: 100%; }

script

import JsonEditor from '@/components/JsonEditor'const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"貴金屬"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"農(nóng)產(chǎn)品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'export default {name: 'JsonEditorDemo',components: { JsonEditor },data() {return {value: JSON.parse(jsonData)}} }

遇到的問題

編輯回顯

this.temp.paramJson = JSON.parse(this.temp.paramJson)

編輯提交需要額外處理,根據(jù)是否是json處理,不是json不需要轉(zhuǎn)string

if (this.temp.paramJson.size === undefined) {tempData.paramJson = this.temp.paramJson} else {tempData.paramJson = JSON.stringify(this.temp.paramJson)}

注 : 以上為傳遞后端使用string時使用,頁面刷新第一次回顯是json,后續(xù)都不是json了

總結

以上是生活随笔為你收集整理的VUE(7) : vue-element-admin[7] : json编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。