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

Question

我正在制作一个可以使用元素 UI 在 vue 2 组合 API 环境中的表单验证来验证的表单。

一个表单里面嵌套了table，结构比较复杂

...
<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' 值 returns 为真。

通过ChromeDevTools Vue extensions查看，发现el-form-item的所有props都正常注册，v-model连接到足够的字段。

我该如何解决这个验证问题？

Answer 1

我发现这是在将 table 的元素从普通 div 切换到 form-item 时引起的，反之亦然。

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

该表单在 show-mode 中显示 'divs' 并且在编辑模式下显示收音机等其他表单元素。我猜当切换到 form-element.

时表单验证无法正常工作

所以我将键添加到表单中，并在切换 show-edit 模式时更改它并且它起作用了。

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

        formReRenderKey.value++
...

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

Element ui's form validation isn't working on vue 2 composition api

javascript

validation

typescript

vue.js

element-ui