Vue表格中鼠标移入移出input显示隐藏 ,有输入值不再隐藏

Vue表格中鼠标移入移出input显示隐藏 , 不再隐藏的效果

	<el-table
          ref="table"
          :data="tableDatas"
          border
          style="width: 100%"
          :span-method="arraySpanMethod"
          id="table"
          row-key="id"
          @cell-mouse-enter="editCell"
        >
		<el-table-column
            prop="name"
            label="排序"
            min-width="80"
            header-align="center"
            align="center"
            type="name"
          >
            <template slot-scope="scope">
              <el-input
                :ref="`name-${scope.row.id}`"
                v-model="scope.row.name"
                v-show="scope.row.id === tabClickId && tabClickLabel === '排序'"
                placeholder="排序"
                @blur="inputBlur(scope.row)"
              >
              </el-input>
              <div
                class="cell-text"
                v-show="scope.row.id !== tabClickId || tabClickLabel !== '排序'"
              >
                {{ scope.row.name }}
              </div>
            </template>
         </el-table-column>
         <el-table-column
            prop="title"
            label="任务标题"
            min-width="80"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                :ref="`title-${scope.row.id}`"
                v-model="scope.row.title"
                v-show="
                  scope.row.id === tabClickId && tabClickLabel === '任务标题'
                "
                placeholder="任务标题"
                @blur="inputBlur(scope.row)"
              >
              </el-input>
              <div
                class="cell-text"
                v-show="
                  scope.row.id !== tabClickId || tabClickLabel !== '任务标题'
                "
              >
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
	</el-table>

<script>
export default {
  data() {
    return {
      tabClickId: "",
      tabClickLabel: "",
      tableDatas: [
        {
          id: 1,
          name: "",
          title: "",
        },
     }
   },
   methods: {
    editCell(item, column, cell, event) {
      //根据点击的单元格判断是否可变成输入框
      switch (column.label) {
      //case内写你的不用鼠标移入显示的名称
        case "":
          return;
        default:
          this.tabClickId = item.id;
          this.tabClickLabel = column.label;
          break;
      }
    },
    // 失去焦点初始化
    inputBlur(item) {
      this.tabClickId = "";
      this.tabClickLabel = "";
      //这里还可以进行其他数据提交等操作
    },
  }

效果如下

默认

在这里插入图片描述

鼠标移入

在这里插入图片描述

鼠标移出有输入值

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mysql主从复制(在虚拟机centos的docker下)

1.安装docker Docker安装(CentOS)简单使用-CSDN博客 2.部署2个mysql docker run --name some-mysql1 -p 33061:3306 -e MYSQL_ROOT_PASSWORD123456 -d mysql:5.7 --character-set-serverutf8mb4 --collation-serverutf8mb4_unicode_cidocker run --name some-mysql2 -p 330…

Ubuntu 常用命令之 chown 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 chown 命令在 Ubuntu 系统中用于改变文件或目录的所有者和组。这个命令的基本格式是 chown [选项]... [所有者][:[组]] 文件...。 chown 命令的主要参数有 -c 或 --changes&#xff1a;类似 verbose&#xff0c;但只在发生改变时…

智能DJ软件Algoriddim djay Pro AI mac功能特点

Algoriddim djay Pro AI mac是一款具有人工智能功能的 DJ 软件&#xff0c;它可以让 DJ 在演出时更加灵活、创意和自由。 Algoriddim djay Pro AI mac主要特点 人工智能智能排列功能&#xff1a;djay Pro AI 可以根据 BPM、音调和热度等因素&#xff0c;将曲目按照最优顺序排列…

护眼台灯适合考公用吗?高口碑的护眼台灯分享

护眼台灯近年来受到越来越多人的关注和喜爱&#xff0c;还得到了一些知名博主、眼科专家和学生家长的认可和推荐&#xff0c;但是市场上存在着一些劣质产品&#xff0c;这些产品存在光线不均、频闪等问题&#xff0c;长期使用这些低劣护眼台灯可能还会导致眼睛酸痛等不适情况。…

vue:antV | G6的超级详细使用(包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用)

目录 第一章 理解基本信息 1.1 安装与引入 1.2 了解基本使用 1.2.1 创建容器 1.2.2 节点信息 1.2.3 边信息 1.2.4 图配置 1.2.5 渲染图数据 1.2.6 demo源代码 1.2.7 实现效果 第二章 g6图表示例使用 2.1 示例代码的展及解释 2.2 示例效果 第三章 自定义图demo及…

python编程(1)之通用引脚GPIO使用

在之前的章节中&#xff0c;小编带领大家学习了&#xff1a;如何构建esp32的python开发环境-CSDN博客 今天小编带领大家开始学习python编程的第一节&#xff0c;通用引脚。esp32c3核心板是一个高度集成&#xff0c;功能丰富的模块&#xff0c;来看下他的功能分布&#xff1a; 我…

『Linux升级路』基础开发工具——gdb篇

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、背景知识介绍 二、gdb指令介绍 一、背景知识介绍 在软件开发中&#xff0c…

不要再浪费时间,一键获取SolidWorks,设计革命由此开始!

不要再在网上浪费时间寻找SolidWorks的安装包了&#xff0c;一键下载安装&#xff0c;你要的一切都可以在这里找到&#xff01; 对于3D建模和计算机辅助设计的人来说&#xff0c;SolidWorks是一个不可或缺的工具。然而&#xff0c;在网上寻找合法且可靠的软件安装包却常常让人…

「工业遥测」图表控件LightningChart在水工业中的应用

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…

nuxt打包占用磁盘IO

目录 前言排除过程 前言 jenkins运行打包&#xff0c;总是要卡一段时间&#xff0c;磁盘IO很高。我手动执行后的确发现了这个问题&#xff0c;如下图所示。 排除过程 我的方案很原始&#xff0c;利用git恢复到以前的版本&#xff0c;抽检&#xff0c;搞了差不多两个小时&am…

es、MySQL 深度分页问题

文章目录 es 深度分页MySQL 深度分页 es 深度分页 es 深度分页问题&#xff0c;有点忘记了&#xff0c;这里记录一下 当索引库中有10w条数据&#xff0c;比如是商品数据&#xff1b;用户就是要查在1w到后10条数据&#xff0c;怎么查询。 es查询是从各个分片中取出前1w到后10条数…

【SpringBoot篇】解决缓存击穿问题① — 基于互斥锁方式

文章目录 &#x1f339;什么是缓存击穿&#x1f33a;基于互斥锁解决问题&#x1f6f8;思路 &#x1f3f3;️‍&#x1f308;代码实现 &#x1f339;什么是缓存击穿 缓存击穿是指在使用缓存系统时&#xff0c;对一个热点数据的高并发请求导致缓存失效&#xff0c;多个请求同时访…

JavaOOP篇----第十篇

系列文章目录 文章目录 系列文章目录前言一、构造方法能不能显式调用?二、什么是方法重载?三、构造方法能不能重写?能不能重载?四、内部类与静态内部类的区别?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,…

软件工程快速复习(期末急救)

每个同学要假想自己是一个项目经理&#xff0c;去完成一个软件项目&#xff0c;比如医院管理系统&#xff0c;自动设备控制系统等&#xff0c;以面向结构的软件工程方法&#xff0c;说出完成项目的步骤&#xff0c;涉及到的具体技术。初步了解面向对象的方法的与面向结构的方法…

“VR全景+”理念下的智慧教育,让VR教学成为趋势

随着VR技术的发展&#xff0c;“VR全景”理念下的智慧教育&#xff0c;从智慧学习环境和新型教学模式两个方面来促进教育进一步革新。VR技术应用在教育领域&#xff0c;对于教学来说是一个飞跃的发展&#xff0c;5G课堂、VR直播教学、沉浸式教学等教学模式的创新&#xff0c;让…

安装@vue/cli时候,升级版本造成冲突的解决方法

问题&#xff1a;原来是2.X版本&#xff0c;想要升级到4.5.9版本就出错了 npm install -g vue/cli4.5.9错误原因&#xff1a;之前安装过vue的2.X版本&#xff0c;导致冲突的文件没有被正确删除 解决方法&#xff1a;安装且覆盖原来存在的文件 npm install -g vue/cli4.5.9 -…

【工具与中间件】通过飞书应用操作云文档

文章目录 前言1. 准备工作1.1 创建应用1.2 创建文件夹 2. 测试租户/个人版实践2.1 权限配置2.2 控制台调试2.3 协作文档添加应用2.4 CRUD2.4.1 根据文档描述选择token并生成2.4.2 新增多维表格数据API2.4.3 删除多维表格数据API2.4.4 查询多维表格数据API2.4.5 修改多维表格数据…

AIGC绘画Midjourney风格关键词和场景关键词

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

[SWPUCTF 2021 新生赛]Do_you_know_http已

打开环境 它说用WLLM浏览器打开&#xff0c;使用BP抓包&#xff0c;发送到重发器 修改User-Agent 下一步&#xff0c;访问a.php 这儿他说添加一个本地地址&#xff0c;它给了一个183.224.40.160&#xff0c;我用了发现没用&#xff0c;然后重新添加一个地址&#xff1a;X-Forwa…

AI数字人互动大屏支持多种场景交互!

互动大屏&#xff08;技术支持&#xff1a;zhibo175&#xff09;本身具有令人瞩目的效果&#xff0c;再配置丰富多彩的多媒体&#xff0c;如引人注目的广告、特效或游戏等&#xff0c;可起到很好的引流作用。在空间开阔且客流密集的场所&#xff0c;使用各种形态的大面积屏幕&a…