GitHub地址: @femessage/el-form-renderer
文档链接: https://femessage.github.io/el-form-renderer/#/Components 里面详细的说明各个参数的用法
我觉得找再多的博客文章 官方文档是最好的解释
基于 element-ui 封装的表单渲染器,完整继承了 element 的属性定义,并进行了简单扩展,从而用户能够通过使用一段预设的数据渲染出一个完整的 element 表单。但它不仅仅是 element-ui ,甚至不仅仅是表单。
Element-UI 表单链接地址: https://element.eleme.cn/#/zh-CN/component/form
Element-UI 的Form Attributes、Methods、Events等 el-form-renderer完全继承
<el-form-renderer
label-width="130px"
label-position="right"
ref="form"
:content="content"
inline
/>
Props
- 支持
el-form
上的所有属性。 content
:[ObjectArray]
定义表单的内容,每一个Object
代表一个原子表单el-input, el-select, ...
,一切el-form-item
上的属性都在此声明,而对于el-input
等之上的属性在$el
属性上进行声明,该Object
上还存在其他属性,例如:id
,type
,label
,options可选的
,等。还有hidden
定义其是否隐藏等属性
Eg:
content = [
{
type: 'input',
id: 'accountId',
label: '账号ID',
disabled: true, // 不可编辑
},
{
type: 'input',
id: 'operator',
label: '运营者姓名',
rules: [{ validator: ******, trigger: 'blur' }], // validator 定义规则
},
{
component: ******, // 可以引入组件,
id: 'identityCard',
label: '身份证',
el: {
mate: 'q_identityCardTails',
data: {},
},
},
{
type: 'select', // 下拉框 remote 获取下拉框的值
id: 'category',
label: '账号分类',
remote: {
url: '/fee/subsidy/category',
onResponse: (data: string[]): { value: string }[] => {
console.log('data: ', data);// 可以打印一下
return data.map((value: string) => ({ value }));
},
},
},
];
使用 remote
属性,简单配置一下远端接口 url,即可自动发起请求并更新 options
属性
remote 在内部做了什么?
export default {
watch: {
remote({url}) {
this.$axios.get(url).then(resp => setOptions(id, resp.data))
}
}
}
这篇文章更好的理解 有好的demo: https://juejin.cn/post/6844903897853591566
- 表单项动态显示或隐藏
- 表单数据联动
- 表单输入/输出数据格式化
- 非常规表单项的处理
- 复杂的表单验证