使用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"

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

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

相关文章

【通俗理解】步长和学习率在神经网络中是一回事吗?

【通俗理解】步长和学习率在神经网络中是一回事吗&#xff1f; 【核心结论】 步长&#xff08;Step Size&#xff09;和学习率&#xff08;Learning Rate, LR&#xff09;在神经网络中并不是同一个概念&#xff0c;但它们都关乎模型训练过程中的参数更新。 【通俗解释&#x…

STL之算法概览

目录 算法概览 算法分析与复杂度标识O() STL算法总览 质变算法mutating algorithms----会改变操作对象之值 非质变算法nonmutating algorithms----不改变操作对象之值 STL算法的一般形式 算法的泛化过程 算法概览 算法&#xff0c;问题之解法也。 以有限的步骤&#xff0…

一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)

Prettier 命令行工具 Prettier 提供了一个强大的命令行界面 (CLI)&#xff0c;允许用户通过命令行来格式化代码。在 package.json 中&#xff0c;你可以配置一个脚本来运行 Prettier&#xff0c;例如&#xff1a; "scripts": {"format": "prettier …

华为IPD流程管理体系L1至L5最佳实践-解读

该文档主要介绍了华为IPD流程管理体系&#xff0c;包括流程体系架构、流程框架实施方法、各业务流程框架示例以及相关案例等内容&#xff0c;旨在帮助企业建立高效、规范的流程管理体系&#xff0c;实现业务的持续优化和发展。具体内容如下&#xff1a; 1. 华为流程体系概述 -…

量化交易系统开发-实时行情自动化交易-4.4.做市策略

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来继续说说做市策略原理。 做市策…

【青牛科技】 D2822M 双通道音频功率放大电路芯片介绍,用于便携式录音机和收音机作音频功率放大器

概述&#xff1a; D2822M 用于便携式录音机和收音机作音频功率放大器。D2822M 采用 DIP8 和 SOP8 封装形式。 特点&#xff1a;  电源电压降到 1.8V 时仍能正常工作  交越失真小  静态电流小  可作桥式或立体声式功放应用  外围元件少  通道分离度高  开机和关机…

Rust学习(十):计算机科学简述

Rust学习&#xff08;十&#xff09;&#xff1a;计算机科学简述 在计算机技术这片广袤的领域中&#xff0c;深入理解其内在机制与逻辑需要付出诸多努力。 学习基础知识是构建计算机技术能力大厦的基石&#xff0c;而这一过程往往漫长而艰辛。只有在对基础知识有了扎实的掌握…

【Python中while循环】

一、深拷贝、浅拷贝 1、需求 1&#xff09;拷贝原列表产生一个新列表 2&#xff09;想让两个列表完全独立开&#xff08;针对改操作&#xff0c;读的操作不改变&#xff09; 要满足上述的条件&#xff0c;只能使用深拷贝 2、如何拷贝列表 1&#xff09;直接赋值 # 定义一个…

抖音短视频矩阵源代码部署搭建流程

抖音短视频矩阵源代码部署搭建流程 1. 硬件准备 需确保具备一台性能足够的服务器或云主机。这些硬件设施应当拥有充足的计算和存储能力&#xff0c;以便支持抖音短视频矩阵系统的稳定运行。 2. 操作系统安装 在选定的服务器或云主机上安装适合的操作系统是关键步骤之一。推…

JVM中TLAB(线程本地分配缓存区)是什么

JVM中TLAB&#xff08;线程本地分配缓存区&#xff09;是什么 简单来说 TLAB&#xff0c;线程本地分配缓存区&#xff0c;是在 Java 堆内存中的一块线程专属的内存区域&#xff0c;每个线程在创建对象时&#xff0c;首先会尝试在自己的 TLAB 区域内分配内存&#xff0c;这样多…

kmeans 最佳聚类个数 | 轮廓系数(越大越好)

轮廓系数越大&#xff0c;表示簇内实例之间紧凑&#xff0c;簇间距离大&#xff0c;这正是聚类的标准概念。 簇内的样本应该尽可能相似。不同簇之间应该尽可能不相似。 目的&#xff1a;鸢尾花数据进行kmeans聚类&#xff0c;最佳聚类个数是多少&#xff1f; plot(iris[,1:4…

day04 企业级Linux安装及远程连接知识实践

1. 使用传统的网卡命名方式 在启动虚拟机时&#xff0c;按tab键进入编辑模式 添加命令&#xff1a; net.ifnames0 biosdevname0 这样linux系统会使用传统的网卡命名&#xff0c;例如eth0、eth1…… 2. 快照 做系统关键操作时&#xff0c;一定要使用快照(先将系统关机) 3.…

unity中Rigidbody组件的其他属性和方法

Rigidbody组件的其他属性和方法 velocity和angularVelocityRigidbodyConstraintsSleep和WakeUpClosestPointOnBoundsOnJointBreakCollisionDetectionModeSweepTest和SweepTestAllIsSleeping velocity和angularVelocity velocity:刚体的线速度&#xff0c;类型为Vector3,可以直…

STM32C011开发(2)----nBOOT_SEL设置

STM32C011开发----2.nBOOT_SEL设置 概述硬件准备视频教学样品申请源码下载参考程序自举模式BOOT0设置配置 nBOOT_SEL生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32CubeProgrammer (STM32CubeProg) 是一款用于编程STM32产品的全功能多操作系统软件工…

编译以前项目更改在x64下面时报错:函数“PVOID GetCurrentFiber(void)”已有主体

win32下面编译成功&#xff0c;但是x64报错 1>GetWord.c 1>md5.c 这两个文件无法编译 1>C:\Program Files (x86)\Windows Kits\10\Include\10.0.22000.0\um\winnt.h(24125,1): error C2084: 函数“PVOID GetCurrentFiber(void)”已有主体 1>C:\Program Files (x…

onvif协议相关:3.1.5 Digest方式获取预置位

背景 关于onvif的其实很早之前我已经在专栏中写了不少了, 使用onvif协议操作设备 但最近有陆陆续续的粉丝问我, 希望我在写一些关于 onvif的设备自动发现、预置位跳转、云台操作的博客。 满足粉丝的需求,安排。 今天我们来实现 获取预置位 准备工作 我们这里的话选择Diges…

5.Feign与ReflectiveFeign

前言 Feign对象作为feign框架的启动门户, 提供构建和运行框架的统一入口, 也是feign框架的核心组件之一 核心逻辑 Feign类结构 public abstract class Feign {public static Builder builder() {return new Builder();}// 获取方法唯一标识public static String configKey(…

docker 通过Dockerfile自定义的镜像部署Springboot项目

一、镜像结构介绍&#xff1a; 镜像&#xff1a;层&#xff08;Layer&#xff09;添加安装包、依赖、配置等&#xff0c;每一次操作都形成新的一层&#xff1b;基础镜像&#xff08;BaseImage&#xff09;应用依赖的系统函数库、环境、配置、文件等&#xff1b;入口&#xff0…

【Canvas与图标】GUI图标

【成图】 120*120的png图标 各种大小图&#xff1a; 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>GUI图标 Draft1</titl…

Spring Boot 整合 ELK 全面指南:实现日志采集、分析与可视化

一、ELK简介 1.1 什么是ELK&#xff1f; ELK 是三个开源工具的组合&#xff1a; Elasticsearch&#xff1a;一个分布式全文搜索和分析引擎&#xff0c;用于存储和查询日志数据。Logstash&#xff1a;一个数据处理管道工具&#xff0c;用于收集、解析和处理日志数据。Kibana&…