JeecgBoot的前端Form升级为FormModel用法

 FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本：1.5.0+)

新版form特性

1、前端支持双向绑定

2、升级无需v-decorator这个反人类属性设置

3、用法form用法跟目前主流框架(element ui iview风格形成统一,前端不在另类)

4、亿华云表单赋值无需手动设置，升级双向绑定自动赋值

新老form用法对比

标签规则升级

校验规则区别

表单赋值区别

表单提交区别

角色管理老版form代码

~~~ <template>   <a-modal     :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">     <a-spin :spinning="confirmLoading">       <a-form :form="form">         <a-form-item           :labelCol="labelCol"           :wrapperCol="wrapperCol"           label="角色名称">           <a-input placeholder="请输入角色名称" v-decorator="[ roleName,用法 validatorRules.roleName]" />         </a-form-item>         <a-form-item           :labelCol="labelCol"           :wrapperCol="wrapperCol"           label="角色编码">           <a-input placeholder="请输入角色编码" :disabled="roleDisabled" v-decorator="[ roleCode, validatorRules.roleCode]" />         </a-form-item>         <a-form-item           :labelCol="labelCol"           :wrapperCol="wrapperCol"           label="描述">           <a-textarea :rows="5" placeholder="..." v-decorator="[ description, validatorRules.description ]" />         </a-form-item>       </a-form>     </a-spin>   </a-modal> </template> <script>   import pick from lodash.pick   import { addRole,editRole,duplicateCheck } from @/api/api   export default {      name: "RoleModal",     data () {        return {          title:"操作",         visible: false,         roleDisabled: false,         model: { },         labelCol: {            xs: {  span: 24 },           sm: {  span: 5 },         },         wrapperCol: {            xs: {  span: 24 },           sm: {  span: 16 },         },         confirmLoading: false,         form: this.$form.createForm(this),         validatorRules:{            roleName:{              rules: [               {  required: true, message: 请输入角色名称! },               {  min: 2, max: 30, message: 长度在 2 到 30 个字符, trigger: blur }             ]},           roleCode:{              rules: [               {  required: true, message: 请输入角色名称!},               {  min: 0, max: 64, message: 长度不超过 64 个字符, trigger: blur },               {  validator: this.validateRoleCode}             ]},           description:{              rules: [               {  min: 0, max: 126, message: 长度不超过 126 个字符, trigger: blur }             ]}         },       }     },     created () {      },     methods: {        add () {          this.edit({ });       },       edit (record) {          this.form.resetFields();         this.model = Object.assign({ }, record);         this.visible = true;         //编辑页面禁止修改角色编码         if(this.model.id){            this.roleDisabled = true;         }else{            this.roleDisabled = false;         }         this.$nextTick(() => {            this.form.setFieldsValue(pick(this.model,roleName, description,roleCode))         });       },       close () {          this.$emit(close);         this.visible = false;       },       handleOk () {          const that = this;         // 触发表单验证         this.form.validateFields((err, values) => {            if (!err) {              that.confirmLoading = true;             values.roleName = (values.roleName || ).trim()             values.roleCode = (values.roleCode || ).trim()             let formData = Object.assign(this.model, values);             let obj;             console.log(formData)             if(!this.model.id){                obj=addRole(formData);             }else{                obj=editRole(formData);             }             obj.then((res)=>{                if(res.success){                  that.$message.success(res.message);                 that.$emit(ok);               }else{                  that.$message.warning(res.message);               }             }).finally(() => {                that.confirmLoading = false;               that.close();             })           }         })       },       handleCancel () {          this.close()       },       validateRoleCode(rule, value, callback){          if(/[\u4E00-\u9FA5]/g.test(value)){            callback("角色编码不可输入汉字!");         }else{            var params = {              tableName: "sys_role",             fieldName: "role_code",             fieldVal: value,             dataId: this.model.id,           };           duplicateCheck(params).then((res)=>{              if(res.success){                callback();             }else{                callback(res.message);             }           });         }       }     }   } </script> <style scoped> </style> ~~~ 

角色管理新版from代码

~~~ <template>   <a-modal     :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">     <a-spin :spinning="confirmLoading">       <a-form-model ref="form"  v-bind="layout"  :model="model" :rules="validatorRules">         <a-form-model-item label="角色编码" required prop="roleCode">           <a-input v-model="model.roleCode" :disabled="roleDisabled"  placeholder="请输入角色编码"/>         </a-form-model-item>         <a-form-model-item label="角色名称" required prop="roleName">           <a-input v-model="model.roleName" placeholder="请输入角色名称"/>         </a-form-model-item>         <a-form-model-item label="描述" prop="description">           <a-textarea :rows="5" v-model="model.description" placeholder="请输入角色描述"/>         </a-form-model-item>       </a-form-model>     </a-spin>   </a-modal> </template> <script>   import { addRole,editRole,duplicateCheck } from @/api/api   export default {      name: "RoleModal",     data () {        return {          title:"操作",         visible: false,         roleDisabled: false,         model: { },         layout: {            labelCol: {  span: 3 },           wrapperCol: {  span: 14 },         },         confirmLoading: false,         validatorRules:{            roleName: [             {  required: true, message: 请输入角色名称! },             {  min: 2, max: 30, message: 长度在 2 到 30 个字符, trigger: blur }           ],           roleCode: [             {  required: true, message: 请输入角色名称!},             {  min: 0, max: 64, message: 长度不超过 64 个字符, trigger: blur },             {  validator: this.validateRoleCode}           ],           description: [             {  min: 0, max: 126, message: 长度不超过 126 个字符, trigger: blur }           ]         },       }     },     created () {      },     methods: {        add () {          this.edit({ });       },       edit (record) {          this.model = Object.assign({ }, record);         this.visible = true;         //编辑页面禁止修改角色编码         if(this.model.id){            this.roleDisabled = true;         }else{            this.roleDisabled = false;         }       },       close () {          this.$emit(close);         this.visible = false;       },       handleOk () {          const that = this;         // 触发表单验证         this.$refs.form.validate(valid => {            if (valid) {              that.confirmLoading = true;             let obj;             if(!this.model.id){                obj=addRole(this.model);             }else{                obj=editRole(this.model);             }             obj.then((res)=>{                if(res.success){                  that.$message.success(res.message);                 that.$emit(ok);               }else{                  that.$message.warning(res.message);               }             }).finally(() => {                that.confirmLoading = false;               that.close();             })           }else{              return false;           }         })       },       handleCancel () {          this.close()       },       validateRoleCode(rule, value, callback){          if(/[\u4E00-\u9FA5]/g.test(value)){            callback("角色编码不可输入汉字!");         }else{            let params = {              tableName: "sys_role",             fieldName: "role_code",             fieldVal: value,             dataId: this.model.id,           };           duplicateCheck(params).then((res)=>{              if(res.success){                callback();             }else{                callback(res.message);             }           });         }       }     }   } </script> <style scoped> </style> ~~~ 

 【编辑推荐】

Windows10这功能已如同残废！教你如何彻底关闭它 C++和C++程序员谁先完蛋？前端 2021年值得关注的亿华云计算人工智能趋势 RAID磁盘阵列到底适不适合你？一文读懂 Windows 10是绝唱！升级微软新系统开始换版本号了云南idc服务商

很赞哦!（67616）