前言:有时候表单会要已表格的样式布局,实现表格里每一项表单的验证,其实关键在于表单项设置prop,绑定输入框的model值,这个model值来自于表格的数据返回(scope.row.数据值)
如果不需要进行表单验证,就不需要在外面包裹 <el-form :model="alldata" :rules="alldata.rules">
表格知识:
如果后台返回字段是你需要的可以直接使用表格项prop对应
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
如果需要自定义后台返回的字段拼接,可以用:
<el-table-column label="年月" align="center">
<template slot-scope="scope">
<span>{ { scope.row.tyear }}</span
>年 <span>{ { scope.row.tmonth }}</span
>月
</template>
</el-table-column>
scope.$index:表格当前项索引,
本文介绍了如何在Vue项目中利用ElementUI实现表格形式的表单,并针对每一项表单进行验证。关键在于正确设置prop,绑定输入框的model值,以及在验证规则中使用scope.$index。通过表格知识和表单知识的结合,详细讲解了如何处理后台返回的数据,以及如何自定义表格列和进行表单验证。
最低0.47元/天 解锁文章
2917

被折叠的 条评论
为什么被折叠?



