当前位置: 首页 > news >正文

使用ElementUI中的el-table制作可编辑的表格

在前端开发时,可能会需要用到可编辑的表格控件。一些原生的UI框架并不支持Table控件的可编辑功能,所以只能自己实现。

以下用Vue3+Element-Plus进行示例开发。

一、实现可编辑的单元格

我想要实现的效果是,鼠标移动到el-table的某行时,该行呈现可编辑效果。所以需要用到Table事件中的cell-mouse-entercell-mouse-leave。当鼠标移入时,将该行数据源编辑状态字段置为true,相应的单元格模板借助v-if绑定呈现出可编辑状态;鼠标移出时,再将状态字段置为false,隐藏编辑状态模板。

完整代码如下:

<template><div><el-table :data="dataList" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave"><el-table-column type="index" width="50" /><el-table-column label="名称" prop="name" width="120"><template #default="scope"><el-input v-if="scope.row.isEdit" class="cell-input" v-model="scope.row.name" /></template></el-table-column><el-table-column label="类型" prop="type" width="150"><template #default="scope"><el-select v-if="scope.row.isEdit" class="cell-select" v-model="scope.row.type" placeholder="请选择"><el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></template></el-table-column><el-table-column label="值" prop="value" width="150" /></el-table></div>
</template><script setup lang="ts">
import { reactive } from 'vue';interface TempData {name: string,type: string,value: string,isEdit: boolean
}const TypeOptions = [{value: 'Option1',label: 'Option1',},{value: 'Option2',label: 'Option2',},{value: 'Option3',label: 'Option3',}
]const dataList = reactive<TempData[]>([{name: '张三',type: 'Option1',value: 'value',isEdit: false},{name: '李四',type: 'Option2',value: 'value',isEdit: false},{name: '王五',type: 'Option3',value: 'value',isEdit: false}
])const handleCellEnter = (row: any, column: any, cell: any, event: any) => {row.isEdit = true
}const handleCellLeave = (row: any, column: any, cell: any, event: any) => {row.isEdit = false
}
</script>
<style scoped>
.cell-input {height: 26px;margin-left: -10px;
}:deep(.cell-select .el-select__wrapper) {height: 26px;min-height: 26px;margin-left: -11px;
}:deep(.el-table .el-table__row) {height: 50px;
}
</style>

(说明:以上代码示例中,对编辑状态下的el-inputel-select样式进行了处理,使鼠标移入移出时不会出现明显的错位现象)

二、解决el-select下拉内容无法选择问题

通常el-select的下拉框会超出所在行的范围,因此当鼠标准备选择下拉框内容时,会因超出行的范围而触发取消编辑状态,el-select就会消失,这样一来永远无法选中下拉选项。

解决的方法便是记录el-select的状态,如果是下拉状态,则el-table的鼠标事件不要触发行状态更改。变更部分代码如下:

let canUpdateEditingState = falseconst handleOptionVisibleChange = (isVisible: boolean, row: any) => {canUpdateEditingState = isVisibleif (!isVisible) {row.isEdit = false}
}const handleCellEnter = (row: any, column: any, cell: any, event: any) => {if (canUpdateEditingState) returnrow.isEdit = true
}const handleCellLeave = (row: any, column: any, cell: any, event: any) => {if (canUpdateEditingState) returnrow.isEdit = false
}

然后给el-select绑定事件方法如下:

@visible-change="(arg: any) => handleOptionVisibleChange(arg, scope.row)"

三、解决el-input无法使用中文输入法的问题

由于输入中文时,输入法弹框也会触发el-tablecell-mouse-leave事件,导致刚打出字符,单元格的编辑状态便取消了。这就需要借助compositionstartcompositionend事件来屏蔽中文输入过程。原理和第二点类似,补充代码如下:

const handleCompositionStart = () => {canUpdateEditingState = true
}const handleCompositionEnd = () => {canUpdateEditingState = false
}

给el-table增加事件绑定:

@compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd"

相关文章:

使用ElementUI中的el-table制作可编辑的表格

在前端开发时&#xff0c;可能会需要用到可编辑的表格控件。一些原生的UI框架并不支持Table控件的可编辑功能&#xff0c;所以只能自己实现。 以下用Vue3Element-Plus进行示例开发。 一、实现可编辑的单元格 我想要实现的效果是&#xff0c;鼠标移动到el-table的某行时&…...

开放性技术的面试题该如何应对?

1. 上线出现问题如何解决&#xff1f; 步骤&#xff1a; 立即响应&#xff1a;迅速确认问题的存在和影响范围。回滚&#xff1a;如果问题严重影响用户&#xff0c;考虑立即回滚到上一个稳定版本。日志分析&#xff1a;查看服务器日志、应用日志和前端日志&#xff0c;定位问题…...

Leetcode 面试150题 88.合并两个有序数组 简单

系列博客目录 文章目录 系列博客目录88. 合并两个有序数组 简单示例 1:示例 2:示例 3:提示:问题: 88. 合并两个有序数组 简单 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n&#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你…...

CGAL CGAL::Polygon_mesh_processing::self_intersections解析

CGAL::Polygon_mesh_processing::self_intersections 是用于检测多边形网格&#xff08;Polygon Mesh&#xff09;中的自相交的函数。自相交是指网格中的某些面&#xff08;例如三角形&#xff09;与同一网格中的其他面交叉的情况。这种情况通常是不期望的&#xff0c;因为它会…...

esp32触发相机

esp32触发相机&#xff0c;测试成功上升沿触发 串口发送命令 up 20000 1 20000 触发 #include <Arduino.h>const int outputPin 12; // 输出引脚 String inputCommand ""; // 串口输入缓冲区// 解析命令参数&#xff0c;例如 "up 10 5" 解析为…...

webrtc支持h265

Webrtc播放H265的技术探索(datachannelwasm) - 飞翔天空energy - 博客园 https://github.com/ZLMediaKit/ZLMediaKit/issues/3589 [技术咨询]addStreamProxy 添加拉流代理之后&#xff0c;webrtc协议无法播放&#xff0c;其它协议正常 Issue #1808 ZLMediaKit/ZLMediaKit G…...

macos 14.0 Monoma 修改顶部菜单栏颜色

macos 14.0 设置暗色后顶部菜单栏还维持浅色&#xff0c;与整体不协调。 修改方式如下&#xff1a;...

在 Mac(ARM 架构)上安装 JDK 8 环境

文章目录 步骤 1&#xff1a;检查系统版本步骤 2&#xff1a;下载支持 ARM 的 JDK 8步骤 3&#xff1a;安装 JDK步骤 4&#xff1a;配置环境变量步骤 5&#xff1a;验证安装步骤 6&#xff1a;注意事项步骤7&#xff1a;查看Java的安装路径 在 Mac&#xff08;ARM 架构&#xf…...

Linux高阶——1123—

1、服务器版本介绍及实现 1、单进程单任务服务器&#xff08;阻塞IO&#xff09; 单进程模型&#xff0c;阻塞IO冲突&#xff0c;等待连接时无法读取数据&#xff0c;读取数据时无法连接 比较适合处理单任务&#xff0c;排队处理业务 伪代码 while(true) {addrlensizeof(c…...

VOLO实战:使用VOLO实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…...

【kafka02】消息队列与微服务之Kafka部署

Kafka 部署 Kafka 部署说明 kafka 版本选择 kafka 基于scala语言实现,所以使用kafka需要指定scala的相应的版本.kafka 为多个版本的Scala构建。这仅在使用 Scala 时才重要&#xff0c;并且希望为使用的相同 Scala 版本构建一个版本。否则&#xff0c;任何版本都可以 kafka下…...

MySQL系列之数据类型(Numeric)

导览 前言一、数值类型综述二、数值类型详解1. NUMERIC1.1 UNSIGNED或SIGNED1.2 数据类型划分 2. Integer类型取值和存储要求3. Fixed-Point类型取值和存储要求4. Floating-Point类型取值和存储要求 结语精彩回放 前言 MySQL系列最近三篇均关注了和我们日常工作或学习密切相关…...

BERT简单理解;双向编码器优势

目录 BERT简单理解 一、BERT模型简单理解 二、BERT模型使用举例 三、BERT模型的优势 双向编码器优势 BERT简单理解 (Bidirectional Encoder Representations from Transformers)模型是一种预训练的自然语言处理(NLP)模型,由Google于2018年推出。以下是对BERT模型的简…...

LLamafactory 批量推理与异步 API 调用效率对比实测

背景 在阅读 LLamafactory 的文档时候&#xff0c;发现它支持批量推理: 推理.https://llamafactory.readthedocs.io/zh-cn/latest/getting_started/inference.html 。 于是便想测试一下&#xff0c;它的批量推理速度有多快。本文实现了 下述两种的大模型推理&#xff0c;并对…...

spf算法、三类LSA、区间防环路机制/规则、虚连接

1.构建spf树&#xff1a; 路由器将自己作为最短路经树的树根根据Router-LSA和Network-LSA中的拓扑信息,依次将Cost值最小的路由器添加到SPF树中。路由器以Router ID或者DR标识。广播网络中DR和其所连接路由器的Cost值为0。SPF树中只有单向的最短路径,保证了OSPF区域内路由计管不…...

C语言学习 12(指针学习1)

一.内存和地址 1.内存 在讲内存和地址之前&#xff0c;我们想有个⽣活中的案例&#xff1a; 假设有⼀栋宿舍楼&#xff0c;把你放在楼⾥&#xff0c;楼上有100个房间&#xff0c;但是房间没有编号&#xff0c;你的⼀个朋友来找你玩&#xff0c;如果想找到你&#xff0c;就得挨…...

TypeError: issubclass() arg 1 must be a class

TypeError: issubclass() arg 1 must be a class 报错代码&#xff1a; import spacy 原因&#xff1a; 库版本错误&#xff0c; 解决方法&#xff1a; pip install typing-inspect0.8.0 typing_extensions4.5.0 感谢作者&#xff1a; langchain TypeError: issubclass() …...

Java面试题、八股文学习之JVM篇

1.对象一定分配在堆中吗&#xff1f;有没有了解逃逸分析技术&#xff1f; 对象不一定总是分配在堆中。在Java等一些高级编程语言中&#xff0c;对象的分配位置可以通过编译器或运行时系统的优化来决定。其中&#xff0c;逃逸分析&#xff08;Escape Analysis&#xff09;是用于…...

【eNSP】动态路由协议RIP和OSPF

动态路由RIP&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;和OSPF&#xff08;Open Shortest Path First&#xff0c;开放式最短路径优先&#xff09;是两种常见的动态路由协议&#xff0c;它们各自具有不同的特点和使用场景。本篇会对这两种协…...

春秋云境 CVE 复现

CVE-2022-4230 靶标介绍 WP Statistics WordPress 插件13.2.9之前的版本不会转义参数&#xff0c;这可能允许经过身份验证的用户执行 SQL 注入攻击。默认情况下&#xff0c;具有管理选项功能 (admin) 的用户可以使用受影响的功能&#xff0c;但是该插件有一个设置允许低权限用…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...