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> ~~~

更多用法參考官方文檔
官方FormModel用法

總結

以上是生活随笔為你收集整理的JeecgBoot的前端Form升级为FormModel用法(支持 v-model 绑定)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。