元素 ui 的表单验证不适用于 vue 2 组合 API

Question

我正在制作一个表单，该表单可以在vue 2 composition API环境中使用元素UI的表单验证进行验证。

表单正在嵌套表，因此其结构相当复杂。

...
<div>
<el-form
ref="smKeyInfoForm"
:model="formData"
:rules="formRules">
<el-table
:data="tableData"
...
>
<el-table-column
v-for="option in tableOptions"
:key="option.prop"
:prop="option.prop"
...
>
<template slot-scope="scope">
<el-form-item :prop="scope.row[option.prop].prop">
<el-input
v-model="formData[scope.row[option.prop].prop]"
/>
...
<script lang="ts">
...
const formRules: { [key: string]: FormRule[]} = {
smName: [{ required: true, trigger: 'blur' }],
clientId: [{ required: true, trigger: 'blur' }],
...
}
...
const formData = {
smName: '',
clientId: '',
...
}).then(() => {
(smKeyInfoForm.value as unknown as ElForm).validate(async (valid) => {
if (valid) {
...

SomethingTab.vue

当我在没有必需字段(例如smName=''(的情况下验证表单时，验证器的'valid'值将返回true。

通过检查Chrome DevTools Vue扩展，我发现el表单项的所有道具都正常注册，并且v-model连接到一个适当的字段。

如何解决此验证问题？

Answer 1

我发现这是在将表的元素从普通div切换到表单项时引起的，反之亦然。

...
<div v-else-if="scope.row[option.prop].type === 'radios'">
<el-radio-group v-model="formData[scope.row[option.prop].prop]">
<el-radio
v-for="radioOption in scope.row[option.prop].options"
:key="radioOption.value"
:label="radioOption.value"
>
{{ radioOption.label }}
</el-radio>
</el-radio-group>
</div>
<div v-else>
{{ scope.row[option.prop] }}
</div>
</div>
</el-form-item>

表单在显示模式下显示"divs"，在编辑模式下显示其他表单元素(如radio(。我想在切换到表单元素时，表单验证不能正常工作。

所以我在表格中添加了关键点，当我切换节目编辑模式时，我会更改它，它就可以工作了。

...
<el-form
...
:key="formReRenderKey"
:model="formData"
:rules="formRules">
...
const onClickBtn = () => {
...
isOnModification.value = true
formReRenderKey.value++
...