我正在制作一個可以在 vue 2 組合 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) {
...
SomeTab.vue
當我驗證沒有必填欄位的表單時（例如 smName = ''），驗證器的“有效”值回傳 true。
通過查看 Chrome DevTools Vue 擴展，我發現 el-form-item 的所有 props 都正常注冊，并且 v-model 連接到一個足夠的欄位。
如何解決此驗證問題？
uj5u.com熱心網友回復：
我發現這是在將表格的元素從普通 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>
該表單在顯示模式下顯示“div”，在編輯模式下顯示其他表單元素，如收音機。我猜想在切換到表單元素時表單驗證無法正常作業。
因此，我在表單中添加了密鑰，并在切換顯示編輯模式時對其進行了更改，并且它可以作業。
...
<el-form
...
:key="formReRenderKey"
:model="formData"
:rules="formRules">
...
const onClickBtn = () => {
...
isOnModification.value = true
formReRenderKey.value
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/425396.html
標籤：javascript 打字稿 Vue.js 验证 元素-ui
上一篇：Laravel9自定義FormRequest拋出“Illuminate\Session\Store型別的物件不可呼叫”