VUE(7) : vue-element-admin[7] : json编辑器

使用组件

标签

<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":"农产品"},{"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)

编辑提交需要额外处理,根据是否是json处理,不是json不需要转string

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

注 : 以上为传递后端使用string时使用,页面刷新第一次回显是json,后续都不是json了