一个基于 Vue 的高度可配置表单生成组件
npm install magicbox-form-corebash
npm install magicbox-form-core --save
`
引入
$3
`javascript
import Vue from 'vue';
import MagicboxFormCore from 'magicbox-form-core';
Vue.use(MagicboxFormCore);
`
$3
`javascript
import { MagicboxFormCore } from 'magicbox-form-core';
export default {
components: {
MagicboxFormCore
}
}
`
基本用法
`vue
:renderdata="formConfig"
v-model="formData"
ref="formRef"
/>
`
组件属性
| 属性名 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| renderdata | 表单渲染配置对象 | Object | {} |
| value | 表单数据对象 (v-model) | Object | {} |
| parentInstance | 父组件实例 | Object | null |
组件方法
| 方法名 | 说明 | 参数 |
|------|------|------|
| validate | 表单验证 | callback(Function) - 验证完成后的回调函数 |
配置说明
$3
`javascript
{
// 表单属性配置
formProps: {
labelWidth: '120px', // 标签宽度
size: 'medium' // 尺寸大小,可选值:medium / small / mini
// 其他 el-form 支持的属性...
},
// 表单项列表
itemRenderList: [
{
// 元素配置
__element__: {
tag: 'el-input', // 使用的 Element UI 组件名称
key: 'fieldName', // 字段名,对应 formData 中的属性
value: '', // 默认值
attrs: { // 传递给组件的属性
placeholder: '请输入'
// 其他组件属性...
}
},
// 标签配置
__label__: {
label: '字段名称' // 表单项标签文本
},
// 验证规则
__regrule__: {
required: true, // 是否必填
regList: [ // 验证规则列表
{
pattern: '/^\\w+$/', // 正则表达式
message: '格式不正确' // 错误提示
}
// 更多规则...
]
},
// 插槽占位符配置(可选)
slot: 'slotName',
__slotRules__: {
prop: 'slotFieldName', // 插槽字段名
rules: [ // 验证规则
{ required: true, message: '不能为空' }
]
}
}
// 更多表单项...
]
}
``