vue中form、table和input标签过长

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-columnv-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;},},

input内容太长

效果:

代码:

<el-tooltip :disabled="disabledTooltip" effect="dark" :content="form[item.fieldName]" placement="top"><el-input @mouseover.native="visibleTooltip3($event)" v-model="form[item.fieldName]"/></el-tooltip>data里面
disabledTooltip:false,method里面:
visibleTooltip3(event){const target = event.target;// console.log(target.offsetWidth, target.scrollWidth);if (target.offsetWidth < target.scrollWidth) {this.disabledTooltip = false;} else {this.disabledTooltip = true;}},

 

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

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

相关文章

vue naive ui 按钮绑定按键

使用vue (naive ui) 绑定Enter 按键 知识点: 按键绑定Button全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效UMD方式使用vue 与 naive ui将vue默认的 分隔符大括号 替换 为 [[ ]] <!DOCTYPE html> <html lang"en"> <head>…

二叉树oj

文章目录 1. 单值二叉树 2. 检查两颗树是否相同。 3. 对称二叉树。 4. 二叉树的前序遍历。 5. 另一颗树的子树。 6.二叉树的构建及遍历。 7.判断一颗二叉树是否是平衡二叉树。 8.翻转二叉树。 文章内容 1. 单值二叉树 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱…

Centos 7.6 安装mongodb

以下是在CentOS 7.6上安装MongoDB的步骤&#xff1a; 打开终端并以root用户身份登录系统。 创建一个新的MongoDB存储库文件 /etc/yum.repos.d/mongodb-org-4.4.repo 并编辑它。 sudo vi /etc/yum.repos.d/mongodb-org-4.4.repo在编辑器中&#xff0c;添加下面的内容到文件中并…

云计算在线实训系统建设方案

一、 人工智能与云计算系统概述 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一种模拟人类智能的科学和工程&#xff0c;通过使用计算机系统来模拟、扩展和增强人类的智能能力。人工智能涉及多个领域&#xff0c;包括机器学习、深度学习、自然…

医疗中心管理环境温湿度,这样操作就对了!

随着医疗技术的不断发展&#xff0c;越来越多的医疗设备对于稳定的工作环境要求越来越高&#xff0c;而环境温湿度是影响这些设备性能和可靠性的关键因素之一。 为了确保医疗设备的正常运行和患者的安全&#xff0c;医疗机构越来越倾向于采用精密空调监控系统来维护设备的稳定性…

【业务功能篇76】微服务网关路由predicates断言条件-filters路由转换地址-跨域问题-多级目录树化层级设计-mybatisPlus逻辑删除

业务开发-基础业务-分类管理 启动renren-fast如果出现如下错误 -Djps.track.ap.dependenciesfalse 添加相关配置即可 分类管理 1.后端分类接口 JDK8特性&#xff1a;https://blog.csdn.net/qq_38526573/category_11113126.html 在后端服务中我们需要查询出所有的三级分类信…

# 【三维重建】【深度学习】NeRF代码Pytorch实现--数据加载(中)

【三维重建】【深度学习】NeRF代码Pytorch实现–数据加载(中) 论文提出了一种5D的神经辐射场来作为复杂场景的隐式表示&#xff0c;称为NeRF&#xff0c;其输⼊稀疏的多⻆度带pose的图像训练得到⼀个神经辐射场模型。简单来说就是通过输入同一场景不同视角下的二维图片和相机位…

【java】LinkedList 和 ArrayList的简介与对比

Java LinkedList和 ArrayList 在使用上&#xff0c;几乎是一样的。由于LinkedList是基于双向链表的&#xff0c;会多出list.getFirst();获取头部元素等方法 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按…

nginx会话保持

ip_hash:通过IP保持会话 作用&#xff1a; nginx通过后端服务器地址将请求定向的转发到服务器上。 将客户端的IP地址通过哈希算法加密成一个数值 如果后端有多个服务器&#xff0c;第一次请求到服务器A&#xff0c; 并在务器登录成功&#xff0c;那么再登录B服务器就要重新…

基于Visual studio创建API项目

API&#xff08;英文全称&#xff1a;Application Programming Interface,中文&#xff1a;应用程序编程接口&#xff09; 为什么要 通过API接口可以与其他软件实现数据相互通信&#xff0c;API这项技术能够提高开发效率。 本文是基于vs2017 .net平台搭建API。希望可以帮助到学…

机器学习:什么是分类/回归/聚类/降维/决策

目录 学习模式分为三大类&#xff1a;监督&#xff0c;无监督&#xff0c;强化学习 监督学习基本问题 分类问题 回归问题 无监督学习基本问题 聚类问题 降维问题 强化学习基本问题 决策问题 如何选择合适的算法 我们将涵盖目前「五大」最常见机器学习任务&#xff1a…

VS Code内存占用过高 - 解决方案

前言 使用VS Code时&#xff0c;其占用的内存可能会急剧增加&#xff0c;从而增加计算机内存的压力&#xff0c;下文介绍如何减少VS Code的内存占用。 通过此方案&#xff0c;本人从3G的内存占用降到了700M的内存占用。 解决方案 打开VS Code的设置&#xff0c;如下图&…