A Form Render Based on JSON Schema for Vue
- 内置 ElementUI 组件
- 支持自定义组件
- 支持自由布局
- 支持样式覆盖
- 支持多语言
- 支持列表组件拖拽
- 支持无限嵌套表单以及嵌套校验,自定义校验规则
- 支持组件联动
- 详尽的文档及示例
npm install -S vue-schema-render
入口文件 index.js
// vue-schema-render 依赖 vue, element-ui,必须先引入 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './app.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App), });
app.vue
<template> <schema-render :schema="schema" ref="schemaRender" > </schema-render> </template> <script> import { SchemaRender } from 'vue-schema-render'; import schema from './schema.js'; // 组件描述文件 export default { components: { SchemaRender, }, data () { return { schema, }; }, methods: { async genData () { // 获取表单数据 const data = await this.$refs.schemaRender.genData(); } } }; </script>
DEMO: click here
- 支持更自由的布局
- 支持列表组件项拖拽
- 监听自定义事件
- 表单填写进度
- 支持 label tooltip
- 支持 component tip
- 支持添加内置组件
- 支持组件 slot
- 是否保留 onChange