vue中form和table标签过长

form标签过长

效果:

代码:

<el-form-item v-for="(item,index) in ticketEditTable1"  :label="item.fieldNameCn" :prop='item.fieldName' :key="item.fieldNameCn" overflow=""
            :rules="form[item.fieldName]==null?{required: false, message: `${item.fieldNameCn}不能为空`, trigger: ['blur','change']}:{required: true, message: `${item.fieldNameCn}不能为空`, trigger: ['blur','change']}">
            <template slot="label">
              <el-tooltip :content="item.fieldNameCn" placement="top" :disabled="isShowTooltip">
            <span  @mouseenter="visibleTooltip">{{item.fieldNameCn | message2}}</span>
              </el-tooltip>
            </template>
            <slot></slot>

            <el-input v-model="form[item.fieldName]" ></el-input>
            </el-form-item>

data里面:
isShowTooltip:false,

method里面:
method:{
//通过鼠标判断标签是否过长,通过注释打印语句,自己调试>=多少
    visibleTooltip(e){
      // console.log("值",e.target.offsetWidth + 18,e.fromElement.clientWidth,e.target.offsetWidth + 18 - e.fromElement.clientWidth >= 0 );
	    this.isShowTooltip = e.target.offsetWidth + 18 - e.fromElement.clientWidth >= -10 ? false : true;  //18为required *号引起的偏差。
    },
}

//过滤器,和method方法是同级别的
filters:{
    //如果长度大于五,就加...显示,如果没就正常显示
    message2(message){
      if(message.length>5){
          return message.substring(0,5)+'...';
      }
      return message;
    }
  },

 content是超长显示的内容,disabled是判断是否显示(鼠标放上去,tooltip是否显示全标签内容)

,mouseenter是method方法,判断标签是否超长,你可以根据注释的console.log()语句打印结果,选择适合的大小判断,|message2是过滤器,就是超长后,原表单显示的内容,

table标签过长

效果:

代码:

 

<el-table-column
              v-for="(item, index) in tableDefain"
              :key="index"
              :label="item.fieldNameCn"
              :prop="item.fieldName"
              align="center"
              width="150%"
            >
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row[item.fieldName]" placement="top-start" :disabled="isShowTooltip2">
                      <span @mouseenter="visibleTooltip2">{{scope.row[item.fieldName] | message1}}</span>
                </el-tooltip>
            </template>

      </el-table-column>

data里面:
isShowTooltip2:false,

method里面:
method:{
visibleTooltip2(e){
      // console.log("值",e.target.offsetWidth + 18,e.fromElement.clientWidth,e.target.offsetWidth + 18 - e.fromElement.clientWidth >= 0 );
	  this.isShowTooltip2 = e.target.offsetWidth + 18 - e.fromElement.clientWidth >= -90 ? false : true;  //18为required *号引起的偏差。
    },
}

//过滤器
filters:{
    message1(message){
      if(typeof message != "undefined"){
        if(message.length>5){
          return message.substring(0,5)+'...';
        }
      }
      return message;
    },
  },

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

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

相关文章

Python土力学与基础工程计算.PDF-土的三项组成

5.3 Python求解 Python 求解代码如下&#xff1a; 1. # 定义已知参数 2. G_s 2.7 # 比重 3. w 0.2 # 含水量 4. e 0.6 # 孔隙比 5. gamma_w 9.81 # 水的重度 6. 7. # 根据公式计算饱和度 8. S_r G_s * w / e 9. print("饱和度为", S_r) 10. 11.…

rust库学习-env_logger(actix-web添加彩色日志、rust添加彩色日志 )

文章目录 介绍actix-web启用彩色日志crate地址&json格式日志 我们在进行rust的web开发时&#xff0c;如果不指定日志&#xff0c;就不会有输出&#xff0c;非常不友好 这里我们使用env_logger进行日志打印 介绍 env_logger 需要配合 log 库使用, env_logger 是 Rust 社区…

SpringCloud学习笔记(四)_ZooKeeper注册中心

基于Spring Cloud实现服务的发布与调用。而在18年7月份&#xff0c;Eureka2.0宣布停更了&#xff0c;将不再进行开发&#xff0c;所以对于公司技术选型来说&#xff0c;可能会换用其他方案做注册中心。本章学习便是使用ZooKeeper作为注册中心。 本章使用的zookeeper版本是 3.6…

Android相机-HAL子系统

引言 应用框架要通过拍照预览摄像获得照片或者视频,就需要向相机子系统发出请求, 一个请求对应一组结果 一次可发起多个请求&#xff0c;并且提交请求是非阻塞的&#xff0c;始终按照接收的顺序以队列的形式先进先出地进行顺序处理 一个请求包含了拍摄和拍照配置的所有信息&…

图为科技-边缘计算在智慧医疗领域的作用

边缘计算在智慧医疗领域的作用 随着科技的进步&#xff0c;智慧医疗已成为医疗行业的重要发展趋势。边缘计算作为新兴技术&#xff0c;在智慧医疗领域发挥着越来越重要的作用。本文将介绍边缘计算在智慧医疗领域的应用及其优势&#xff0c;并探讨未来发展方向。 一、边缘计算…

Skywalking Kafka Tracing实现

背景 Skywalking默认场景下&#xff0c;Tracing对于消息队列的发送场景&#xff0c;无法将TraceId传递到下游消费者&#xff0c;但对于微服务场景下&#xff0c;是有大量消息队列的业务场景的&#xff0c;这显然无法满足业务预期。 解决方案 Skywalking的官方社区中&#xf…

远程调试环境配置

目录 一、准备工作 二、ssh连接和xdebug配置 1.ssh连接 2.xdebug配置 三、xdebug调试&#xff0c;访问 一、准备工作 1.安装vscode里面的两个扩展 2.安装对应PHP版本的xdebug 去xdebug官方&#xff0c;复制自己的phpinfo源码到方框里&#xff0c;再点击Analyse Xdebug: …

Pandas数据清洗和常用函数

数据清洗 数据清洗是对一些没用的数据进行处理的过程。 当数据出现确实、数据格式错误、错误数据或重复数据的情况&#xff0c;如果我们想要分析的更加准确&#xff0c;就要对没用的数据进行处理。 此时我们学习采用菜鸟教程的数据作为案例&#xff0c;如下图所示。 在途中包…

AWS SDK 3.x for .NET Framework 4.0 可行性测试

前言 为了应对日益增长的网络安全挑战, 越来越多的互联网厂商已经陆续开始或者已经彻底停止了对 SSL 3 / TLS 1.0 / TLS1.1 等上古加密算法的支持. 而对于一些同样拥有悠久历史的和 AWS 服务相关联的应用程序, 是否可以通过仅更新 SDK 版本的方式来适应新的环境. 本文将以 Win…

【ElasticSearch】一键安装IK分词器无需其他操作

要注意的时下面命令中的es是我容器的名称&#xff0c;要换成你对应的es容器名 docker exec -it es /bin/bash # 进入容器 ./bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-analysis- ik/releases/download/v7.12.1/elasticsearch-analysis-ik-7.1…

锚定医学营养 健启星深耕不辍

在生命医学中&#xff0c;营养被称为维持患者生命的物质基础。医学营养&#xff0c;是结合了医学临床营养、营养素与疾病预防等方面&#xff0c;并根据患者的医疗记录、身体检查及心理情况&#xff0c;由医生及专业营养师给出配比完善的营养素&#xff0c;以此来增加患者身体的…

IDEA常用插件之类Jar包搜索Maven Search

文章目录 IDEA常用插件之类Jar包搜索Maven Search说明安装插件使用方法1.搜索自己要搜的jar包2.根据类名搜索 IDEA常用插件之类Jar包搜索Maven Search 说明 它可以帮助用户快速查找和浏览Maven中央存储库中可用的依赖项和插件。它可以帮助用户更方便地管理项目依赖项。 安装…

进行Stable Diffusion的ai训练怎么选择显卡?

Stable Diffusion主要用于从文本生成图像&#xff0c;是人工智能技术在内容创作行业中不断发展的应用。要在本地计算机上运行Stable Diffusion&#xff0c;您需要一个强大的 GPU 来满足其繁重的要求。强大的 GPU 可以让您更快地生成图像&#xff0c;而具有大量 VRAM 的更强大的…

基于YOLOV8模型的课堂场景下人脸目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOV8模型的课堂场景下人脸目标检测系统可用于日常生活中检测与定位课堂场景下人脸&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检…

uniapp 使用permission获取录音权限

使用前&#xff0c;需要先配置权限 android.permission.RECORD_AUDIO

Linux基础命令2

目录 基础命令 ln命令 grep命令 查看文本内容的五种方式 1.cat命令 2.more命令 3.less命令 4.head命令 5.tail命令 echo命令 alias命令 基础命令 ln命令 作用&#xff1a;创建链接文件 格式&#xff1a;ln 命令选项 目标文件 链接文件名 命令选项&#xff1a;-s…

在Eclipse中创建javaweb工程

新建动态web工程 点击project或other之后&#xff0c;如何快速找到Dynamic Web Project 填写工程名等详细信息 也许会出现下面的对话框 项目结构图

韩顺平java集合

遍历集合方式: public static void main(String[] args) {List<Object> arrayList new ArrayList<>();arrayList.add(1);arrayList.add(3);arrayList.add(111);Iterator<Object> iterator arrayList.iterator();while (iterator.hasNext()){System.out.pri…

黑客自学笔记

谈起黑客&#xff0c;可能各位都会想到&#xff1a;盗号&#xff0c;其实不尽然&#xff1b;黑客是一群喜爱研究技术的群体&#xff0c;在黑客圈中&#xff0c;一般分为三大圈&#xff1a;娱乐圈 技术圈 职业圈。 娱乐圈&#xff1a;主要是初中生和高中生较多&#xff0c;玩网恋…

【网络安全知识】Windows系统安全加固安全加固分析、概念及账户管理和认证权限

Windows系统安全加固分析 最小化方式安装 为了提高系统的安全性&#xff0c;采用最小化方式安装是最可靠的&#xff0c;只安装网络 服务所必需的组件。如果以后有新的服务需求&#xff0c;再安装相应的服务组件 &#xff0c;并及时进行安全设置。 系统加固工作 对Windows系统安…