elementplus 表格中表单的验证

最新推荐文章于 2024-08-02 00:06:19 发布

Thekingyu

最新推荐文章于 2024-08-02 00:06:19 发布

阅读量1k

点赞数 1

分类专栏： vue+apicloud 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Thekingyu/article/details/127408979

版权

vue+apicloud 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文详细探讨了如何在Element UI中正确配置el-formref和el-tableref，确保table数据作为form对象内的有效属性进行验证。作者分享了不同方法，包括动态路径表达式和模板编译，以解决'please transfer a valid prop to form item!'错误。

摘要由CSDN通过智能技术生成

<el-form ref="form" :model="form">

<el-table ref="Table" :data="form.tableData">

注意！验证的table数据一定要在form表单 form的对象里

例子 form:{tableData:[]}不然就报

please transfer a valid prop path to form item!

我一直以为是-1后来发现不是

然后这样也行

<template #default="{ row, $index }">
        <el-form-item :prop="`tableData.${$index}.name`" :rules="rules.name">
            <el-input type="text" placeholder="输入姓名" v-model="row.name"></el-input>
        </el-form-item>
</template>

<template #default="{ row, $index }">
        <el-form-item :prop="'tableData.'+$index+'.name'" :rules="rules.name">
            <el-input type="text" placeholder="输入姓名" v-model="row.name"></el-input>
        </el-form-item>
</template>

拼接也可以。