Form 表单
不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置
8ff8d7896f1fae88ceb1356b607294ac9a008887/examples/views/docs/form.md#">基础用法
配置项list中通过type可以配置任意组件，不受框架限制
:::snippet 使用list属性设置数据源，列表项中的type指定组件类型，每一项都已设置为el-form-item的子组件，通过rules配置校验规则
<template>
<eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
</template>
<script>
export default {
data() {
return {
formList: [
{ type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
{ type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
{ type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
{ type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
]
}
},
methods: {
handleSubmit(value) {
console.log(value)
},
handleCancel() {
this.$refs.form.reset()
console.log('cancel!')
}
}
}
</script>
:::
8ff8d7896f1fae88ceb1356b607294ac9a008887/examples/views/docs/form.md#">分组
对配置项进行分组
:::snippet 在配置项属性中设置group参数，没有设置分组的配置项默认归为基本信息分组
<template>
<eagle-form :list="formList" style="width: 500px;"></eagle-form>
</template>
<script>
export default {
data() {
return {
formList: [
{ type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
{ type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
{ type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
{ type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
{ type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
]
}
}
}
</script>
:::
8ff8d7896f1fae88ceb1356b607294ac9a008887/examples/views/docs/form.md#">自定义分组
有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义
:::snippet 使用Object对象的方式配置分组信息，并在组件中使用具名插槽slot配置分组标题
<template>
<eagle-form :list="formList" style="width: 500px;">
<template #group-not-bad="{ label }">
<div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
<span>哎哟 - {{ label }} - 不错哦</span>
<el-button size="mini" type="primary">这是一个按钮</el-button>
</div>
</template>
</eagle-form>
</template>
<script>
export default {
data() {
return {
formList: [
{ type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
{ type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
]
}
}
}
</script>
:::
Attribute 属性
参数|说明|类型|可选值|默认值 -|-|-|-|- value / v-model | 绑定值 | Object | - | - list | 表单项配置列表 | Array | - | []
Methods 方法
方法名|说明|参数 -|-|- reset | 重置表单 | -
Events 事件
事件名称|说明|回调参数 -|-|- change | 表单model发生变化时触发 | model对象 submit | 点击表单提交按钮时触发 | model对象 cancel | 点击表单取消按钮时触发 | -
List 表单项配置列表
参数|说明|类型|可选值|默认值 -|-|-|-|- type | 组件类型 | String | - | el-input key | 参数名 | String | - | - label | 参数标签 | String | - | - props | 组件参数 | Object,Function(model: object)) | - | {} style | 组件样式 | Object | - | { width: "100%" } on | 组件事件 | Object,Function(model: object) | - | {} visible | 组件v-if状态 | Boolean,Function(model: object) | - | true show | 组件v-show状态 | Boolean,Function(model: object) | - | true rules | 组件校验规则 | Object,Array | - | - tip | 组件提示框 | Object,String | - | {}