Vue + ElementUI 实现可编辑表格及校验

效果

动画

完整代码见文末

实现思路

  1. 使用两个表单分别用于实现修改和新增处理。

  2. 通过一个editIndex变量判断是否是编辑状态来决定是否展示输入框,当点击指定行的修改后进行设置即可:

    <el-table-columnv-for="(column, index) in columns":key="index":label="column.label":prop="column.prop"align="center"><template #default="{ row, $index }"><div v-if="$index === editIndex" class="validate-info"><el-form-item :prop="column.prop"><el-input v-model="editRow[column.prop]"/></el-form-item></div><span v-else><span>{{ row[column.prop] }}</span></span></template>
    </el-table-column>
    
    edit(row, index) {if (this.editIndex > -1) {this.$message.warning('请先完成修改中的行')return}this.editRow = {...row}this.editIndex = index
    }
    
  3. 通过隐藏表头实现新增表格和修改表格的合并,同时表格数据只有addRow

    <el-table :data="[addRow]" :show-header="false">...
    </el-table>
    

实现细节讲解

  1. 当无数据时只展示新增行:

    image-20230801162740429

    通过设置以下样式即可:

    /deep/ .el-table__empty-block {display: none;
    }
    
  2. 新增或者修改数据行时增加行高用于显示校验信息:

    动画

    行高通过以下样式进行控制,不处于新增或者修改状态时设置为 0 即可:

    .add-table /deep/ .el-form-item {margin: 18px 0;
    }
    

    为了在修改时只设置修改行的行高,只需要只对输入框绑定样式即可:

    <div v-if="$index === editIndex" class="validate-info"><el-form-item :prop="column.prop"><el-input v-model="editRow[column.prop]"/></el-form-item>
    </div>
    

完整代码

<template><div class="app"><el-formref="editableForm":model="editRow":rules="rules"label-width="0":show-message="true"class="editable-table"><el-table :data="tableData"><el-table-columnv-for="(column, index) in columns":key="index":label="column.label":prop="column.prop"align="center"><template #default="{ row, $index }"><div v-if="$index === editIndex" class="validate-info"><el-form-item :prop="column.prop"><el-input v-model="editRow[column.prop]"/></el-form-item></div><span v-else><span>{{ row[column.prop] }}</span></span></template></el-table-column><el-table-column label="操作" width="200" align="center"><template #default="{ row, $index }"><el-form-item><template v-if="$index === editIndex"><el-button type="success" size="mini" plain @click="save">保存</el-button><el-button type="info" size="mini" plain @click="cancel">取消</el-button></template><template v-else><el-buttontype="primary"size="mini"plain@click="edit(row, $index)">修改</el-button><el-popconfirmtitle="是否确认删除?"@confirm="deleteRow($index)"style="margin-left: 10px;"><el-button slot="reference" type="danger" size="mini" plain>删除</el-button></el-popconfirm></template></el-form-item></template></el-table-column></el-table></el-form><el-formref="addForm":model="addRow":rules="rules"label-width="0":show-message="true"class="add-table"><el-table :data="[addRow]" :show-header="false"><el-table-columnv-for="(column, index) in columns":key="index":label="column.label":prop="column.prop"align="center"><template #default="{ row }" class="validate-info"><div class="validate-info"><el-form-item :prop="column.prop"><el-input v-model="addRow[column.prop]"/></el-form-item></div></template></el-table-column><el-table-column label="操作" width="200px" align="center"><template #default="{ row }"><el-form-item><el-button type="success" size="mini" plain @click="add(row)">新增</el-button></el-form-item></template></el-table-column></el-table></el-form></div>
</template><script>
export default {data() {return {// 表格数据tableData: [{username: '张三',address: '北京'},{username: '李四',address: '上海'}],//配置列columns: [{label: '用户名',prop: 'username'},{label: '地址',prop: 'address'}],// 规则rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'}],address: [{required: true, message: '请输入地址', trigger: 'blur'}],},// 当前编辑行下标editIndex: -1,// 当前编辑行editRow: {username: '',address: ''},// 新增行addRow: {username: '',address: ''}}},methods: {save() {this.$refs.editableForm.validate((valid) => {if (valid) {this.tableData.splice(this.editIndex, 1, { ...this.editRow })this.editIndex = -1this.$message.success('修改成功')}return valid})},cancel() {this.editIndex = -1},edit(row, index) {if (this.editIndex > -1) {this.$message.warning('请先完成修改中的行')return}this.editRow = {...row}this.editIndex = index},add(row) {if (this.editIndex > -1) {this.$message.warning('请先完成修改中的行')return}this.$refs.addForm.validate((valid) => {if (valid) {this.addRow = {}this.tableData.push({ ... row})this.$message.success('新增成功')}return valid})},deleteRow(index) {this.tableData.splice(index, 1)this.$message.success('删除成功!');}}
}
</script><style scoped lang="less">
.app {padding: 20px;/deep/ .el-form-item {margin-bottom: 0;}
}.validate-info {/deep/ .el-form-item {margin: 18px 0;}
}.editable-table {/deep/ .el-table__empty-block {display: none;}
}.editable-table, .add-table {width: 60%;margin: 0 auto;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/78280.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 开发代码规范

一. AndroidStudio开发工具规范 使用最新的稳定版本.统一文件的编码格式为utf-8. 清除每个类里面的无效的import导包.代码样式统一,比如&#xff0c;tab缩进4个空格&#xff0c;或者 tab size等如果没有特殊情况使用默认的配置即可。每行字数每行字符数不得超过 160 字符&…

SpringMVC -- REST风格开发,RESTful快速开发、RESTful注解开发

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 REST 一、REST简介1.1REST风格简介 二、RESTful入门案例2.…

MySQL日期常见的函数

-- 获取当天日期 -- 2023-06-20 select curdate();-- 获取当天年月日时分秒 select now();-- 日期运算 -- 2024-06-20 17:04:17 select date_add(now(),interval 1 year);-- 日期比较 -- 0 select datediff(now(),now());-- 日期MySQL对于日期类型数据如何查询 -- 获取指定日期…

IDEA SpringBoot Maven profiles 配置

IDEA SpringBoot Maven profiles 配置 IDEA版本&#xff1a; IntelliJ IDEA 2022.2.3 注意&#xff1a;切换环境之后务必点击一下刷新&#xff0c;推荐点击耗时更短。 application.yaml spring:profiles:active: env多环境文件名&#xff1a; application-dev.yaml、 applicat…

2023年 Java 面试八股文(20w字)

目录 第一章-Java基础篇 1、你是怎样理解OOP面向对象 难度系数&#xff1a;⭐ 2、重载与重写区别 难度系数&#xff1a;⭐ 3、接口与抽象类的区别 难度系数&#xff1a;⭐ 4、深拷贝与浅拷贝的理解 难度系数&#xff1a;⭐ 5、sleep和wait区别 难度系数&a…

CI/CD—Docker初入门学习

1 docker 了解 1 Docker 简介 Docker 是基于 Go 语言的开源应用容器虚拟化技术。Docker的主要目标是build、ship and run any app&#xff0c;anywhere&#xff0c;即通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;达到应用组件级别的一次封装、到处运…

MySQL索引3——Explain关键字和索引使用规则(SQL提示、索引失效、最左前缀法则)

目录 Explain关键字 索引性能分析 Id ——select的查询序列号 Select_type——select查询的类型 Table——表名称 Type——select的连接类型 Possible_key ——显示可能应用在这张表的索引 Key——实际用到的索引 Key_len——实际索引使用到的字节数 Ref ——索引命…

vs导出和导入动态库和静态库

1. 动态库和导出和导入 1.1 动态库的导出 1. 创建新项目 新建新项目&#xff0c;选择动态链接库&#xff08;DLL&#xff09;。 填写项目名称&#xff0c;并选择项目保存的路径&#xff0c;然后点击创建。 创建完成后&#xff0c;会自动生成如下所示文件&#xff0c;可以根据…

PostgreSQL-数据库命令

PostgreSQL-数据库命令 介绍 一个数据库是一个或多个模式的集合&#xff0c;而模式包含表、函数等。因此&#xff0c;完整的逻辑组织结构层次是服务器实例&#xff08;PostgreSQL Server&#xff09;、数据库&#xff08;Database&#xff09;、模式&#xff08;Schema&#…

jmeter 5.1彻底解决中文上传乱码

1.修改源码,然后重新打jar包,就是所有上传文件名重新获取文件名 参考链接:多种Jmeter中文乱码问题处理方法 - 51Testing软件测试网 2.修改Advanced,必须选java

API接口统一管理

API接口统一管理 在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口&#xff1b;这样便于后期维护和团队开发。 axios二次封装 对于axios不熟悉的话&#xff0c;建议先学习这篇文章:Axios的基本使用 在开发项目的时候避免不了与后…

App Cleaner Uninstaller for Mac 苹果电脑软件卸载工具

App Cleaner & Uninstaller 是一款非常有用的 Mac 应用程序清理和卸载工具。它可以彻底地清理系统中的应用程序、扩展和残留文件&#xff0c;以释放磁盘空间并优化系统性能。 此外&#xff0c;它还提供了磁盘空间监控和智能清理建议等功能&#xff0c;使用户可以轻松地管理…

STM32基础入门学习笔记:面包板 配件包扩展模块与编程

文章目录&#xff1a; 一&#xff1a;阵列键盘 1.阵列键盘测试程序 KEYPAD4x4.h KEYPAD4x4.c main.c 2.键盘中断测试程序 NVIC.h NVIC.c main.c 二&#xff1a;舵机控制 1.延时函数驱动舵机程序 SG90.h SG90.c main.c 2.PWM(脉冲宽度调制 脉宽调制/占空比)驱动…

Leetcode周赛 | 2023-8-6

2023-8-6 题1体会我的代码 题2我的超时代码题目体会我的代码 题3体会我的代码 题1 体会 这道题完全就是唬人&#xff0c;只要想明白了&#xff0c;只要有两个连续的数的和&#xff0c;大于target&#xff0c;那么一定可以&#xff0c;两边一次切一个就好了。 我的代码 题2 我…

应急响应-勒索病毒的处理思路

0x00 关于勒索病毒的描述 勒索病毒入侵方式&#xff1a;服务弱口令&#xff0c;未授权&#xff0c;邮件钓鱼&#xff0c;程序木马植入&#xff0c;系统漏洞等 勒索病毒的危害&#xff1a;主机文件被加密&#xff0c;且几乎难以解密&#xff0c;对主机上的文件信息以及重要资产…

NAT协议(网络地址转换协议)详解

NAT协议&#xff08;网络地址转换协议&#xff09;详解 为什么需要NATNAT的实现方式静态NAT动态NATNAPT NAT技术的优缺点优点缺点 NAT协议是将IP数据报头中的IP地址转换为另外一个IP地址的过程&#xff0c;主要用于实现私有网络访问公有网络的功能。这种通过使用少量的IP地址代…

【源码分析】Nacos自动注册源码分析

文章目录 服务注册&#xff08;AP协议&#xff09;服务发现&#xff08;CP协议&#xff09;Nacos是如何整合到SpringCloudAlibaba的&#xff1f; 服务注册&#xff08;AP协议&#xff09; Nacos提供了NamingService的registerInstance方法来提供服务注册的功能。 因此只要我们…

vue v-slot指令

目录 定义语法使用场景场景一场景二场景三tips只有一个默认插槽时 定义 在Vue中&#xff0c; v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。 v-slot 指令可以用于 标签或组件标签上&#xff0c;以便在子组件中使用插槽。 语法 使用 v-slo…

16-1_Qt 5.9 C++开发指南_多语言界面

文章目录 1. 多语言界面设计概述2. tr()函数的使用3. 生成语言翻译文件4. 使用Qt Linguist 翻译 ts 文件5. 调用翻译文件改变界面语言5.1 生成qm文件5.2 项目启动时设置界面语言5.3 动态切换语言 1. 多语言界面设计概述 有些软件需要开发多语言界面版本&#xff0c;如中文版和…

自动化测试框架?数据驱动vs关键字驱动,该怎么做?

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 对于自动化测试框…