### vxe-form 的赋值与校验 `vxe-form` 是 VXE-Table 提供的一个表单组件，支持复杂的表单配置、动态字段以及强大的校验功能。以下是关于 `vxe-form` 赋值和校验的具体实现方式。 #### 1. 基本结构 `vxe-form` 需要通过 `fields` 属性定义表单项列表，并可以通过 `data` 属性绑定表单的数据对象[^5]。以下是一个简单的例子： ```javascript <template> <vxe-form :data="formData" :rules="formRules"> <vxe-form-item title="用户名" field="username" :span="12"> <template #default="{ data }"> <vxe-input v-model="data.username" placeholder="请输入用户名"></vxe-input> </template> </vxe-form-item> <vxe-form-item title="密码" field="password" :span="12"> <template #default="{ data }"> <vxe-input type="password" v-model="data.password" placeholder="请输入密码"></vxe-input> </template> </vxe-form-item> <vxe-form-item align="center" title="" :span="24"> <template #default> <vxe-button status="primary" @click="submitEvent">提交</vxe-button> </template> </vxe-form-item> </vxe-form> </template> <script> export default { data() { return { formData: {}, // 表单数据 formRules: { // 校验规则 username: [{ required: true, message: '用户名不能为空' }], password: [ { required: true, message: '密码不能为空' }, { min: 6, max: 18, message: '长度应在 6 到 18 之间' } ] } }; }, methods: { submitEvent() { this.$refs.xForm.validate(valid => { if (valid) { console.log('验证成功:', this.formData); } else { console.log('验证失败'); } }); } } }; </script> ``` --- #### 2. 动态赋值 可以使用 Vue 实例中的 `formData` 数据来动态更新表单的值。例如，在某些场景下需要预填充表单内容时，可以直接修改 `formData` 对象。 ```javascript methods: { setFormData() { this.formData = { username: 'testUser', password: '123456' }; } } ``` 调用该方法即可完成表单的动态赋值操作。 --- #### 3. 自定义校验逻辑 如果内置的校验规则无法满足需求，还可以自定义校验函数。例如，限制输入为正整数且大于零的情况： ```javascript formRules: { amount: [ { required: true, message: '金额不能为空' }, { validator: ({ cellValue }) => { const value = parseFloat(cellValue); if (!isNaN(value) && value > 0) { return true; } return false; }, message: '请输入有效的金额（大于零）' } ] } ``` --- #### 4. 清空表单 当需要清空整个表单的内容时，可以使用 `resetFields` 方法重置表单状态并清除错误提示信息。 ```javascript clearForm() { this.$refs.xForm.resetFields(); } ``` --- #### 5. 复杂场景下的应用 对于更复杂的应用场景，比如嵌套对象或者数组类型的字段，可以在 `fields` 定义中指定路径访问器。例如： ```javascript fields: [ { field: 'user.info.name', title: '姓名' }, { field: 'user.hobbies[]', title: '爱好' } ], ``` 此时需要注意的是，`formData` 应该预先设置好对应的初始结构，以便能够正常渲染表单项。 --- ### 总结 以上展示了如何在 `vxe-form` 中进行基本的赋值与校验操作，包括静态规则设定、动态赋值处理、自定义校验逻辑以及表单重置等功能。这些特性使得开发者能够在实际项目中灵活应对各种业务需求。