vue3项目el-table表格行内编辑加输入框校验

news/2024/10/3 11:41:39 标签: vue

核心点

1. el-form的model属性需要跟el-form-item的prop要对应

2. el-form的model属性绑定tableData

3. el-form-item的prop绑定字符串:scope.index+.列名(注意有个点)

4. el-form-item需要单独设置rules属性

代码示例

<el-form :model="tableData" :rules="tbRules">
    <el-table :data="tableData">
      <el-table-column>
        <template #default="scope">
          <el-form-item label="名称" :prop="scope.$index + '.name'" :rules="tbRules.name">
            <!-- 封装一个输入框组件InputCell,根据当前行是否开启编辑状态(这个变量可以存在scope.row里)分别显示输入框或者展示数据 待完善 -->            
            <InputCell :rowData="scope.row" :column="scope.column"></InputCell>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
const tableData = ref([{name: 'test'}]);
const tbRules = {
  name: [
    { required: true, message: '输入不能为空', trigger: 'blur' }
  ]
}

遇到的问题

说明下因为我二次封装了el-table,数据和列都是传进去的,组件里通过循环输出列,所以可能才会出现这个问题吧。

提交时输入框失焦校验都通过,但是表单整体校验没过 ,给校验方法打断点执行发现 ,遇到scope.$index为-1的时候也在表单中产生了列,但这行数据实际不存在,所以校验没通过。

暂时规避办法:scope.$index等于-1时不渲染el-table-column,加个v-if判断。


http://www.niftyadmin.cn/n/5688288.html

相关文章

05.useIsomorphicEffect

在 React 应用开发中,特别是涉及到**服务器端渲染(SSR)**时,正确处理副作用是一个常见挑战。useIsomorphicEffect 钩子提供了一种智能的方式来在服务器端和客户端环境中使用适当的副作用钩子。这个自定义钩子可以帮助开发者避免与 SSR 相关的常见陷阱,提高应用的性能和可靠…

C语言 | Leetcode C语言题解之题451题根据字符出现频率排序

题目&#xff1a; 题解&#xff1a; #define HASH_FIND_CHAR(head, findint, out) HASH_FIND(hh, head, findint, sizeof(char), out) #define HASH_ADD_CHAR(head, intfield, add) HASH_ADD(hh, head, intfield, sizeof(char), add)struct HashTable {char key;int val;UT_ha…

C++-第三章收尾:友元、匿名对象和new

目录 第一节&#xff1a;友元 1-1.友元函数 1-2.友元类 第二节&#xff1a;匿名对象 第三节&#xff1a;编译器优化 3-1.构造拷贝->直接构造 3-2.构造拷贝拷贝->直接构造 第四节&#xff1a;new 下期预告&#xff1a; 第一节&#xff1a;友元 一个类可以有友元函数和…

VSCode开发Vue3+TS项目中遇到各种波浪线(诊断信息)

一、问题汇总 在使用Visual Studio Code&#xff08;VSCode&#xff09;开发Vue3 TypeScript项目时&#xff0c;会遇到各种波浪线错误&#xff08;诊断信息&#xff09;&#xff0c;这些问题或错误通常由以下几人原因引起的&#xff1a; 1.1 常见问题 1、typeScript配置问题…

electron出现乱码和使用cmd出现乱码

第一种出现乱码。这种可以通过chcp 65001&#xff0c;设置为utf-8的编码。第二种&#xff0c;是执行exec的时候出现乱码&#xff0c;这个时候需要设置一些编码格式&#xff0c;可以通过iconv-lite进行解决&#xff0c;这个方法是node自带的&#xff0c;所以不需要导入。使用方法…

MySQL 索引选择详解

✨MySQL 索引选择详解✨ 引言 在使用 MySQL 进行数据查询时&#xff0c;索引是提升性能的关键工具。通过合理选择和优化索引&#xff0c;可以显著加快查询速度&#xff0c;减少磁盘 I/O&#xff0c;进而提高数据库响应时间。然而&#xff0c;有时 MySQL 可能不会选择我们预期…

文章解读与仿真程序复现思路——高电压技术EI\CSCD\北大核心《适用于并联构网型储能系统的协调有功控制策略设计》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

OpenCV第十二章——人脸识别

1.人脸跟踪 1.1 级联分类器 OpenCV中的级联分类器是一种基于AdaBoost算法的多级分类器&#xff0c;主要用于在图像中检测目标对象。以下是对其简单而全面的解释&#xff1a; 一、基本概念 级联分类器&#xff1a;是一种由多个简单分类器&#xff08;弱分类器&#xff09;级联组…