vue form表单中嵌套table表格实现逐行的输入框校验

最新推荐文章于 2024-05-17 09:31:05 发布
置顶 最新推荐文章于 2024-05-17 09:31:05 发布
阅读量2.7k 收藏 11
点赞数 1
文章标签： javascript vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40581358/article/details/114435551
版权

先看效果图：
在这里插入图片描述
需求是：后面的记录值input输入框失去焦点就进行校验，如果不为空的时候要满足前面记录类型（是个select）的选择项，不同的选择项input的校验不一样，直接是上代码：

 <el-table-column label="记录值">
            <!-- :rules="fromaRules.rember" -->
            <template slot-scope="scope">
              <!-- <el-input v-model="searchMap.rember" placeholder=""></el-input> -->
              <el-form-item
                label=
最低0.47元/天 解锁文章
BSCIO_599
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd vue项目： form 结合table添加校验
amy1019的博客
05-11 332
参考：antdv table+form行内校验_antd 表单以行内形式展示校验信息-CSDN博客
antd Table中插入可编辑的单元格
热门推荐
赵又又的博客
08-30 2万+
最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图  ...
vue3+antd-vue@4 a-form 嵌套a-table 实现行内 勾选才进行检验
最新发布
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
05-17 341
vue3+antd-vue@4 a-form 嵌套a-table 实现行内 勾选才进行检验
a-table组件的动态列和列数据编辑
a513436535的博客
09-07 1331
a-table组件的动态列和列数据编辑
重生之我使用vue3+element写出了formTable（验证表格验证）[附源码]
qq_41605935的博客
12-24 495
我重生了 校霸抽。。。咳咳错了。。。我重生了 使用vue3实现制作验证表格、老规矩 先上图（最后附带源码）看起来简单就是单纯的form套table，nonono里面有门道的，且听我娓娓道来（那个。。。刚重生代码水平不太行，目前封装的只是实现了功能，但是感觉还有优化的空间，不知道咋优化，大佬们给点意见，球球你们了 /流泪）
vue+element el-table表格输入校验
weixin_44401744的博客
08-03 681
vue+element el-table表格输入校验
vue + element：table 结合 form 实现动态新增、编辑表格，并且校验
weixin_43299180的博客
08-11 4094
根据场景不一样，可以区分为整体校验和逐条校验；
基于elementUI的Vue 中 el-form 嵌套 el-table的写法
无人之岛08的博客
03-19 1795
前端页面： 前端vue代码： <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-table :data="ruleForm.evidenceTemplateList" stripe border style="width: 100%" size="mini"> <el-table-column type="index" label="序号" min-width="20"
vue实现form表单与table表格的数据关联功能示例
10-17
在Vue.js中，实现表单（form）与表格（table）的数据关联是一项常见的需求，它涉及到数据双向绑定、事件监听以及动态操作数组等核心概念。本示例将详细讲解如何在Vue环境中完成这一功能。 首先，HTML部分创建了一个...
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementUI 表单校验功能之数组多层嵌套
12-08
总结一下，处理Vue Element UI表单的数组多层嵌套校验，关键在于理解如何正确地绑定和校验数组内的对象属性。无论是通过内嵌的`el-form`组件还是动态`prop`，都能实现预期的校验效果。在实际开发中，理解并灵活运用...
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的...
form表单多层数据结构校验以及form表单和table表格校验结合完整案例，超级详细，直接复制粘贴，拿来就用
jieweiwujie的博客
10-10 2105
form表单和table表格校验,多层数据结构
vue.js 使用v-for 循坏的多个table 如何去区分
songqiu821的博客
07-08 3229
在项目中遇到这样一个问题，同一个页面上有多个table，这多个table是使用v-for循环出来的，每个table中都有一个颜色变色器，修改每个table的颜色变色器 ，保存的时候发现修改后的颜色没有保存成功，经过测试发现修改每个table的颜色变色器时，不知道修改的是哪个table的数据，后来经过认真读取iview的文档才发现解决方法，在此记录下 。 最初是使用“颜色设置”一列 使用render函数实现的 如下代码 //使用的iview组件中的table <div v-for="(item,in
antd form表单嵌套取值
sunzhen15896的博客
11-03 1999
export interface DefInputProps { label?: string; readOnly?: boolean; onChange?:(value: any) => void; } export const DefInput: React.FC<DefInputProps> = ({ label, readOnly, onChange, }) => { return ( <> <div cl
a-table编辑整列内容
weixin_43400431的博客
07-25 1107
a-table编辑整列内容
form表单中嵌套tabel，并绑定校验规则
weixin_40507164的博客
05-12 582
element form rules table
vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示
前端探险家的博客
11-20 1万+
老样子，先来个效果图
Vue中 对Table表格中的输入项进行校验
晓风揽月
12-22 1万+
项目开发中，经常会遇到在场景：对table表格的输入项字段进行校验，同时提交时整体校验，效果如图所示： Table: ！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验； 2.ivu-form-item元素，绑定动态prop; html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法： <template> <div class="wrapper"> <...
elementplus 表单嵌套表格 校验
06-09
如果您使用 Element Plus 表单嵌套表格，并且需要进行校验，可以使用以下步骤： 1. 在表格中定义需要校验的列，并设置验证规则。 2. 在表单中使用 el-table-column 组件来定义表格的列，同时设置 prop 属性为表格数据中的对应字段。 3. 在 el-table-column 组件中，使用 scoped slot 来定义表格单元格的内容，同时使用 el-form-item 组件来包裹表格单元格中的输入控件，以实现表格单元格中的输入控件校验。 4. 在 el-form 组件中使用 ref 属性来设置表单的引用名称，以便在提交表单时进行表单校验。 5. 在表单提交时，可以通过 this.$refs.form.validate() 方法来进行表单校验。 下面是一个使用 Element Plus 表单嵌套表格进行校验的示例代码： ```html <template> <el-form ref="form" :model="form" label-width="120px" rules="rules"> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template #default="{ row }"> <el-form-item :prop="'name' + row.id"> <el-input v-model="row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="age" label="年龄"> <template #default="{ row }"> <el-form-item :prop="'age' + row.id"> <el-input v-model="row.age"></el-input> </el-form-item> </template> </el-table-column> </el-table> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { tableData: [ { id: 1, name: '', age: '' }, { id: 2, name: '', age: '' } ] }, rules: { tableData: [ { type: 'array', required: true, message: '请至少添加一条记录' }, { validator: (rule, value, callback) => { for (let i = 0; i < value.length; i++) { const row = value[i] const nameProp = `name${row.id}` const ageProp = `age${row.id}` this.$refs.form.validateField(nameProp, error => { if (error) { callback(error) } else { this.$refs.form.validateField(ageProp, error => { if (error) { callback(error) } else { callback() } }) } }) } }, trigger: 'submit' } ] } } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('表单校验通过') } else { console.log('表单校验失败') } }) } } } </script> ``` 在这个示例代码中，我们定义了一个包含两列（姓名和年龄）的表格，同时设置了每行数据的校验规则。在表格单元格中，我们使用了 el-form-item 组件来包裹输入控件，并且在 el-form 组件中设置了引用名称为 form，以便在提交表单时进行校验。在表单提交时，我们通过调用 this.$refs.form.validate() 方法来进行表单校验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值