element-ui动态删除表单项后导致表单验证报错“please transfer a valid prop path to form item!“

最新推荐文章于 2025-04-14 14:13:28 发布

原创最新推荐文章于 2025-04-14 14:13:28 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

92 篇文章

订阅专栏

element-ui

10 篇文章

订阅专栏

本文介绍如何在 Vue 中使用 Element UI 的 El-Form 组件时，通过 v-for 循环动态绑定 List 中的对象，确保 prop 名称与列表元素保持一致，并避免点号在 prop 中的特殊含义。同时，探讨了组件的统一性和规则管理的最佳实践。

<template v-for="(person,index) in Form.List">
    <el-form-item :prop="'List.'+index + '.code'" :key="person.key" :rules="rules">
        <el-input v-model="person.code"></el-input>
    </el-form-item>
    <el-form-item prop="name">
        <el-input v-model="person.name"></el-input>
    </el-form-item>
    <el-button @click="removeDomain(index)" size="small">-</el-button>
</template>

el-form-item 里面的循环prop名字，需要和form中list的名字一致，这样才能确保组件的统一性

prop 中的值千万不要用点号，点具有特殊含义，会进行对象下级查找