使用组件

标签

<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了

VUE(7) : vue-element-admin[7] : json编辑器相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
vue.js json_带有Vue.js的JSON编辑器
vue.js json v-jsoneditor (v-jsoneditor) Vue JSONEditor. Vue JSONEditor. View Demo 查看演示 Download Sour ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
【vue】【element】el-table列表中设计一个颜色块
[vue][element]el-table列表中设计一个颜色块使用style中的background加载对应颜色. <el-table-column class="bj" ...
微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器（思路详解）...
这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试 ...

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

使用组件

遇到的问题

VUE(7) : vue-element-admin[7] : json编辑器相关推荐

最新文章

热门文章