由于 vue 中使用默认的 json-editor 组件不能调整对应样式，项目中 UI 库使用的为 Element UI 。后来找到一个 vue-ui-json-editor 库，对应 Element UI 样式。官方的效果如下：
Install
npm install vue-json-ui-editor --save
Use
<template>
<json-editor ref="JsonEditor" :schema="schema" v-model="model">
<button @click="submit">submit</button>
<button @click="reset">Reset</button>
</json-editor>
</template>
<script>
const SCHEMA = {
type: 'object',
title: 'vue-json-editor demo',
properties: {
name: {
type: 'string',
},
email: {
type: 'string',
},
},
};
// import vue-json-ui-editor
import JsonEditor from '../../src/JsonEditor.vue';
export default {
components: { JsonEditor },
data: () => ({
// init json schma file ( require('@/schema/newsletter') )
schema: SCHEMA,
// data
model: {
name: 'Yourtion',
},
}),
methods: {
submit(_e) {
alert(JSON.stringify(this.model));
},
reset() {
this.$refs.JsonEditor.reset();
},
},
};
</script>
可以直接 clone vue-ui-json-editor 官方仓库 查看效果效果
提示
vue-ui-json-editor 官方的例子中一些输入组件验证不太完善，如 number 类型组件的上下限验证等，需根据项目实际情况自行调整。
修改组件上下限调整，可以参考这里。
