Form升級為FormModel用法 · JeecgBoot 開發文檔

## FormModel 表單 (支持 v-model 綁定)(Ant Design of Vue 版本：1.5.0+) [TOC] ### 新版form特性 - 1、支持雙向綁定 - 2、無需v-decorator這個反人類屬性設置 - 3、form用法跟目前主流框架(element ui iview風格形成統一,不在另類) - 4、表單賦值無需手動設置，雙向綁定自動賦值 ### 新老form用法對比 ![](https://img.kancloud.cn/39/0b/390bc788053e66e11ba92b1d087994f1_1845x816.png) 標簽規則升級 ![](https://img.kancloud.cn/10/b6/10b636555cc5ec7f19cdad4e6573558c_1798x514.png) 校驗規則區別 ![](https://img.kancloud.cn/8e/99/8e99190e52f21df00a76a928502a7dbf_1866x555.png) 表單賦值區別 ![](https://img.kancloud.cn/a0/fa/a0faeae320544b086b1ed6d73218e3a8_1625x436.png) 表單提交區別 ![](https://img.kancloud.cn/bf/b8/bfb8a62523d13209c20fa5beb39478b9_1656x551.png) ### 代碼案例分析角色管理老版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> ``` ### 注意：這里有大坑 ~~~ this.$refs.form.resetFields(); ant-design-vue官方文檔聲明對整個表單進行重置，將所有字段值重置為初始值并移除校驗結果但是實際form綁定的model無法清除原始值。所以添加頁面和編輯頁面的時候，一定先清空，再設置默認值。 ~~~ 千萬不要這么寫 ~~~ this.edit(this.model) ~~~ ![](https://img.kancloud.cn/dd/89/dd89e94e4fa7efeb23f8310cbbd96453_1108x206.png) ### 官方文檔 [官方FormModel用法](https://www.antdv.com/components/form-model-cn/)