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.rhkb.cn/news/109165.html

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

相关文章

8年测试经验之谈 —— 什么是全链路压测?

随着互联网技术的发展和普及&#xff0c;越来越多的互联网公司开始重视性能压测&#xff0c;并将其纳入软件开发和测试的流程中。 阿里巴巴在2014 年双11 大促活动保障背景下提出了全链路压测技术&#xff0c;能更好的保障系统可用性和稳定性。 什么是全链路压测&#xff1f; …

【AutoLayout案例04-游戏图片-按钮适配 Objective-C语言】

一、好,我们再看一个案例, 刚才,这个案例, 这么一个案例 这个案例,是什么意思呢, 这里给大家做一个3.5英寸、4.0英寸的屏幕适配, 因为我们这里图片,只有一个,就是4英寸的这么一个图片 什么意思呢,要求我们在3.5英寸的屏幕、和4英寸的屏幕的时候,都能正常显示这个图…

基于大数据+django+mysql的学习资源推送系统的设计与实现(含报告+源码+指导)

本系统为了数据库结构的灵活性所以打算采用MySQL来设计数据库&#xff0c;而Python技术&#xff0c; B/S架构则保证了较高的平台适应性。文中主要是讲解了该系统的开发环境、要实现的基本功能和开发步骤&#xff0c;并主要讲述了系统设计方案的关键点、设计思想。 由于篇幅限制…

2.神经网络的实现

创建神经网络类 import numpy # scipy.special包含S函数expit(x) import scipy.special # 打包模块 import pickle# 激活函数 def activation_func(x):return scipy.special.expit(x)# 用于创建、 训练和查询3层神经网络 class neuralNetwork:# 初始化神经网络def __init__(se…

【数据分析】统计量

1. 均值、众数描述数据的集中趋势度量&#xff0c;四分位差、极差描述数据的离散程度。 2. 标准差、四分位差、异众比率度量离散程度&#xff0c;协方差是度量相关性。 期望值分别为E[X]与E[Y]的两个实随机变量X与Y之间的协方差Cov(X,Y)定义为&#xff1a; 从直观上来看&…

Vue2向Vue3过度核心技术自定义指令

目录 1 自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例6.总结 2 自定义指令-指令的值1.需求2.语法3.代码示例 3 自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码 1 自定义指令 1.指令介绍 内置指令&#xff1a;v-html、v…

channel并发编程

不要通过共享内存通信&#xff0c;要通过通信共享内存。 channel是golang并发编程中一种重要的数据结构&#xff0c;用于多个goroutine之间进行通信。 我们通常可以把channel想象成一个传送带&#xff0c;将goroutine想象成传送带周边的人&#xff0c;一个传送带的上游放上物品…

四信重磅推出5G RedCap AIoT摄像机 RedCap轻量级5G终端新品首发!

6月6日&#xff0c;四信受邀出席移动物联网高质量发展论坛&#xff0c;并在移动物联网新产品发布环节隆重推出5G RedCap AIoT摄像机&#xff0c;再次抓紧需求先机&#xff0c;为行业用户创造无限可能&#xff01; 两大应用场景 助推RedCap走深向实 火遍全网络的RedCap应用场景可…

【JavaEE进阶】MyBatis表查询

文章目录 一. 使用MyBatis完成数据库的操作1. MyBatis程序中sql语句的即时执行和预编译1.1 即时执行&#xff08;${}&#xff09;1.2 预编译&#xff08;#{}&#xff09;1.3 即时执行和预编译的优缺点 2. 单表的增删改等操作2.1 增加操作2.2 修改操作2.3 删除操作2.4 like(模糊…

LeetCode538. 把二叉搜索树转换为累加树

538. 把二叉搜索树转换为累加树 文章目录 [538. 把二叉搜索树转换为累加树](https://leetcode.cn/problems/convert-bst-to-greater-tree/)一、题目二、题解方法一&#xff1a;递归&#xff08;中序遍历与节点更新&#xff09;方法二&#xff1a;反向中序遍历与累加更新&#x…

JavaFX 加载 fxml 文件

JavaFX 加载 fxml 文件主要有两种方式&#xff0c;第一种方式通过 FXMLLoader 类直接加载 fxml 文件&#xff0c;简单直接&#xff0c;但是有些控件目前还不知道该如何获取&#xff0c;所以只能显示&#xff0c;目前无法处理。第二种方式较为复杂&#xff0c;但是可以使用与 fx…

初阶数据结构(六)队列的介绍与实现

&#x1f493;博主csdn个人主页&#xff1a;小小unicorn&#x1f493; ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的学习足迹&#x1f69a; &#x1f339;&#x1f339;&#x1f339;关注我带你学习编程知识 栈 队列的介绍队列的概念&#xff1a;队…

GWO-LSTM交通流量预测(python代码)

使用 GWO 优化 LSTM 模型的参数&#xff0c;从而实现交通流量的预测方法 代码运行版本要求 1.项目文件夹 data是数据文件夹&#xff0c;data.py是数据归一化等数据预处理脚本 images文件夹装的是不同模型结构打印图 model文件夹 GWO-LSTM测试集效果 效果视频&#xff1a;GWO…

SNN论文总结

Is SNN a great work ? Is SNN a convolutional work ? ANN的量化在SNN中是怎么体现的&#xff0c;和threshold有关系吗&#xff0c;threshold可训练和这个有关吗&#xff08;应该无关&#xff09; 解决过发放不发放的问题。 Intuation SNN编码方式 Image to spike patter…

stm32之19.温湿度模块(待补充)

dth11.c文件① #include "dht11.h" #include "delay.h"// 1、温湿度模块初始化(PG9) void Dht11_Init(void) {// 0、GPIO外设信息结构体GPIO_InitTypeDef GPIO_InitStruct;// 1、使能硬件时钟 RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOG, ENABLE);//…

Pyqt5开发实战记录

入职以来第一个开发项目&#xff1a; 1、如何给Qlabel加边框&#xff1a;右键label对象&#xff0c;选择“改变样式表”输入一下代码&#xff1a; border: 1px solid black;2、如何让垂直布局中button大小不发生变化&#xff1a;其实很简单&#xff0c;只需要设置button的最大…

【seaweedfs】2、Finding a needle in Haystack: Facebook’s photo storage 分布式对象存储论文

文章目录 一、介绍二、背景、设计理念2.1 背景2.2 NFS-based Design2.3 Discussion 三、设计和实现3.1 概览3.2 Haystack Directory3.3 Haystack Cache3.4 Haystack Store3.4.1 Photo Read3.4.2 Photo Write3.4.3 Photo Delete3.4.4 The Index File3.4.5 Filesystem 3.5 Recove…

WebGL 缓冲区对象介绍,创建并使用缓冲区,使用缓冲区对象向顶点着色器传入多个顶点数据的所有步骤

目录 使用缓冲区对象 使用缓冲区对象向顶点着色器传入多个顶点的数据&#xff0c;需要遵循以下五个步骤。 创建缓冲区对象&#xff08;gl.createBuffer&#xff08;&#xff09;&#xff09; gl.createBuffer&#xff08;&#xff09;的函数规范 gl.deleteBuffer &#…

C# winform加载yolov8模型测试(附例程)

第一步&#xff1a;在NuGet中下载Yolov8.Net 第二步&#xff1a;引用 using Yolov8Net; 第三步&#xff1a;加载模型 private IPredictor yolov8 YoloV8Predictor.Create("D:\\0MyWork\\Learn\\vs2022\\yolov_onnx\\best.onnx", mylabel); 第四步&#xff1a;图…

【OpenCV • c++】图像对比度调整 | 图像亮度调整

&#x1f680; 个人简介&#xff1a;CSDN「博客新星」TOP 10 &#xff0c; C/C 领域新星创作者&#x1f49f; 作 者&#xff1a;锡兰_CC ❣️&#x1f4dd; 专 栏&#xff1a;【OpenCV • c】计算机视觉&#x1f308; 若有帮助&#xff0c;还请关注➕点赞➕收藏&#xff…