el-table在鼠标移动到单元格时变为下拉框,否则是普通文本

el-table将多个单元格改为下拉框,导致渲染卡顿,解决方法在鼠标移动到单元格时变为下拉框,否则是普通文本

<el-table-column label="显示方向" width="150px" align="center" key="direction" prop="direction":show-overflow-tooltip="true"><template #default="{ row, $index }"><el-select v-if="row.showDropdown" v-model="row.direction" placeholder="请选择"><el-option v-for="item in directionList " :key="item.dictCode" :value="item.dictValue":label="item.dictLabel"></el-option></el-select><div v-else @mouseover="handleMouseOver(row)" @mouseleave="handleMouseLeave(row)" style="min-height: 20px;">{{ getLabelFromOptions(directionList, row.direction) }}</div></template></el-table-column>

js代码

<script setup>
const directionList = ref([{ "dictCode": 1, "dictLabel": "左", "dictValue": "left"}, { "dictCode": 2, "dictLabel": "右", "dictValue": "right"},]);//显示方向//鼠标移入下拉框
const handleMouseOver = (row) => {row.showDropdown = true;
};
//鼠标移出下拉框
const handleMouseLeave = (row) => {row.showDropdown = false;
};//下拉框根据value获取label
function getLabelFromOptions(options, value) {const option = options.find(opt => opt.dictValue === value);return option ? option.dictLabel : '';
}
</script>

效果如图
在这里插入图片描述

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

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

相关文章

Jmeter分布式压测过程常见问题

1、JMeter分布式压测试&#xff0c;结果树响应数据为空 解决&#xff1a;打开主控机的jmeter-bin,打开jmeter-properties,将modeStandard 前面的#去掉&#xff0c;保存重启jmeter 2、JMeter压力测试报Address already in use: connect错误 方法一&#xff1a; cmd中&#x…

SpringBoot实现热部署

一、热部署&#xff08;Hot Swap&#xff09; 从Java1.4起&#xff0c;JVM引入了HotSwap&#xff0c;能够在Debug的时候更新类的字节码。所以使用热部署&#xff0c;可以实现修改代码后&#xff0c;无须重启服务就可以加载修改的代码&#xff0c;但是它只能用来更新方法体。 实…

2023-2024年重庆职业院校技能大赛“信息安全管理与评估”比赛样题

2023 年重庆职业院校技能大赛&#xff08;高等职业教育&#xff09; “信息安全管理与评估”样题任务书 第一阶段&#xff1a;任务 1 网络平台搭建&#xff08;50 分&#xff09;任务 2 网络安全设备配置与防护&#xff08;250 分&#xff09; 第二阶段&#xff1a;第一部分 网…

web蓝桥杯真题--14、关于你的欢迎语

介绍 营销号&#xff0c;有时候需要一些特定的欢迎语&#xff0c;但针对特定的用户&#xff0c;我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题&#xff0c;实现根据模版生成特定用户的欢迎语。 准备 本题已经内置了初始代码&#xff0c;打开实验环境&…

flutter-相关个人记录

1、flutter 安卓打包打包报错 flutter build apk -v --no-tree-shake-icons 2、获取华为指纹证书命令 keytool -list -v -keystore ***.jks 3、IOS项目中私有方法查找隐藏文件中 1、cd 项目目录地址 2、grep -r xerbla. "xerbla"为需要查找的关键字 3…

【秒剪】如何一键恢复至素材原长?

Step1:点击下方【剪辑】 Step2:点击【时长截取】 Step3:点击【恢复至原长】 Step4:点击【恢复所有片段到原长】

推荐一个还可以的windows ssh工具

1.下载 https://github.com/kingToolbox/WindTerm/releases 2.解压 3.使用 上传 下载都很快 比cmd窗口好用 当然和finalshell有点像

系统登录的时候的密码如何做到以加密的形式进行登录【java.security包下的api】工具类。

/** description: 将普通的publicKey转化得到一个RSAPublicKey* author: zkw* date: 2024/1/24 16:17* param: publicKey 普通的publicKey* return: RSAPublicKey 得到一个新的RSAPublicKey**/public static RSAPublicKey getPublicKey(String publicKey) throws NoSuchAlgorit…

vue中图片不显示问题 - vue中静态资源加载

文章目录 vue中图片不显示问题静态资源URL 转换规则webpack 静态资源处理 图片不显示问题问题描述解决办法1&#xff1a;使用require引入require is not defined 解决办法2&#xff1a;使用import引入解决办法3&#xff1a;将图片放进公共文件夹static或public vue中图片不显示…

《解锁R统计分析:深度探索R Commander图形界面》

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在数据科学与大数据技术的浪潮中&#xff0c;R…

基于Java的学生宿舍门禁信息管理系统的设计与实现(源码+lw+部署文档+讲解等

目录 前言 详细视频演示 具体实现截图 技术栈 后端框架SpringBoot 前端框架Vue 持久层框架MyBaitsPlus 系统测试 系统测试目的 系统功能测试 系统测试结论 代码参考 数据库代码参考 源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、…

【数据结构】数据结构初识

前言&#xff1a; 数据结构是计算存储&#xff0c;组织数据的方式。数据结构是指相互间存在一种或多种特定关系的数据元素的集合。通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技术有关。 Data Structure Vi…

H.264数据解析

什么是H.264 H264 是 MPEG-4 标准所定义的最新编码格式&#xff0c;同时也是技术含量最高、代表最新技术水平的视频编码格式之一&#xff0c;标准写法应该是H.264 H264 视频格式是经过有损压缩的&#xff0c;但在技术上尽可能做的降低存储体积下获得较好图像质量和低带宽图像…

劳特巴赫的基础使用(二)

一、基本介绍 LAUTERBACH是世界领先的微处理器开发工具厂商&#xff0c;成立于1979年&#xff0c;总部位于德国慕尼黑。 JTAG Debugger由PowerDebug和Debug Cable组成。PowerDebug是通用控制模块&#xff0c;支持所有Cable&#xff0c;没有License。Debug Cable绑定License&a…

26、江科大stm32视频学习笔记——I2C读写W25Q64

一、W25Q64简介 1、W25Q64的内存空间结构: 一页256字节&#xff0c;4K(4096 字节)为一个扇区&#xff0c;16个扇区为1块&#xff0c;容量为8M字节&#xff0c;共有128个块&#xff0c;2048 个扇区。 2、W25Q64每页大小由256字节组成&#xff0c;每页的256字节用一次页编程指…

保姆级:Palworld幻兽帕鲁32人服务器一键部署

创建幻兽帕鲁服务器1分钟部署教程&#xff0c;阿里云和腾讯云均推出幻兽帕鲁服务器服务器和部署教程&#xff0c;4核16G和4核32G配置可选&#xff0c;阿腾云atengyun.com分享1分钟自建幻兽帕鲁Palworld服务器教程&#xff1a; 幻兽帕鲁服务器创建教程 幻兽帕鲁服务器官方推荐…

【模拟通信】AM、FM等的调制解调

调制相关的概念 调制&#xff1a;控制载波的参数&#xff0c;使载波参数随调制信号的规律变化 已调信号&#xff1a;受调载波&#xff0c;含有调制信号的全部特征 调制的作用: 提高发射效率多路复用&#xff0c;提高信道利用率提高系统抗干扰能力 两种调制方式 线性调制&a…

​第20课 在Android Native开发中加入新的C++类

​这节课我们开始利用ffmpeg和opencv在Android环境下来实现一个rtmp播放器&#xff0c;与第2课在PC端实现播放器的思路类似&#xff0c;只不过在处理音视频显示和播放的细节略有不同。 1.压缩备份上节课工程文件夹并修改工程文件夹为demo20&#xff0c;将demo20导入到Eclipse或…

RBD —— 简介

目录 General workflow Tips RBD SOP inputs and outputs Clustering Importing a fractured object into DOPs RBD SOP support nodes Related SOPs Low-level SOPs 通常在刚体模拟中&#xff0c;希望实体对象会因某些碰撞或力而破碎&#xff1b;Houdini内大多数破碎…

C# Bitmap类学习1

Bitmap对象封装了GDI中的一个位图&#xff0c;此位图由图形图像及其属性的像素数据组成.因此Bitmap是用于处理由像素数据定义的图像的对象。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using …