JeecgBoot的前端Form升级为FormModel用法(支持 v-model 绑定)
作者:小编
发布时间:2021-03-03
点击数:
FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本:1.5.0+)
新版form特性
1、支持双向绑定 2、无需v-decorator这个反人类属性设置 3、form用法跟目前主流框架(element ui iview风格形成统一,不在另类) 4、表单赋值无需手动设置,双向绑定自动赋值
新老form用法对比
标签规则升级
校验规则区别
表单赋值区别
表单提交区别
角色管理老版form代码
~~~
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭"
wrapClassName="ant-modal-cust-warp"
style="top:5%;height: 85%;overflow-y: hidden">
"confirmLoading">
"form">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色名称">
"请输入角色名称" v-decorator="[ 'roleName', validatorRules.roleName]" />
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="角色编码">
"请输入角色编码" :disabled="roleDisabled" v-decorator="[ 'roleCode', validatorRules.roleCode]" />
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="描述">
"5" placeholder="..." v-decorator="[ 'description', validatorRules.description ]" />
~~~
角色管理新版from代码
~~~
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭"
wrapClassName="ant-modal-cust-warp"
style="top:5%;height: 85%;overflow-y: hidden">
"confirmLoading">
"form" v-bind="layout" :model="model" :rules="validatorRules">
"角色编码" required prop="roleCode">
"model.roleCode" :disabled="roleDisabled" placeholder="请输入角色编码"/>
"角色名称" required prop="roleName">
"model.roleName" placeholder="请输入角色名称"/>
"描述" prop="description">
"5" v-model="model.description" placeholder="请输入角色描述"/>
~~~
更多用法参考官方文档官方FormModel用法