当前位置: 首页 > news >正文

el-select、el-autocomplete的选项内容过长显示完整内容

问题:

el-select、el-autocomplete的选项内容过长需要看清完整内容

解决方案:

使用el-popover悬停显示完整内容

代码:

<el-form-item label="备注" prop="remark"><el-autocomplete v-model="form.remark" style="width: 100%" value-key="remark" :fetch-suggestions="queryRemarkSearch" clearable><!-- 自定义每个建议项的显示内容 --><template #default="{ item }"><div><el-popoverplacement="top-start"width="600"trigger="hover":content="item.remark"><div class="option-item" slot="reference">{{ item.remark }}</div></el-popover></div></template></el-autocomplete></el-form-item><el-form-item label="备注" prop="remark"><el-select v-model="form.remark" style="width: 100%" @focus="setOptionWidth" filterable clearable ><el-option v-for="item in remarkList" :key="item.id" :label="item.remark" :value="item.id"  :style="{width:selectOptionWidth,'min-width': '350px'}"><el-popoverplacement="top-start"width="600"trigger="hover":content="item.remark"><div class="option-item" slot="reference">{{ item.remark }}</div></el-popover></el-option></el-select>
</el-form-item>setOptionWidth:function(event){// 下拉框弹出时,设置弹框的宽度this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
},

效果展示:

在这里插入图片描述

http://www.lryc.cn/news/476376.html

相关文章:

  • Go-单元测试
  • 【Linux】IPC 进程间通信(一):管道(匿名管道命名管道)
  • Kotlin类与对象
  • Windows版 nginx安装,启动,目录解析,常用命令
  • 基于51单片机的电子隐形防盗网proteus仿真
  • Fish Agent:多语言 Voice-to-Voice 开源语音模型;Runway 推出摄像机运镜功能丨 RTE 开发者日报
  • locust压测工具环境搭建(Linux、Mac)
  • 欠定方程有多个真正解,超定方程可能无解所以有最小二乘解
  • LeetCode27:移除元素
  • JAVA 插入 JSON 对象到 PostgreSQL
  • 视图,物化视图,普通表区别简介
  • C++ | Leetcode C++题解之第530题二叉搜索树的最小绝对差
  • 使用Node.js构建实时聊天应用
  • STM32F103C8T6学习笔记1--新建工程模板
  • RK3568平台开发系列讲解(内存篇)Linux 内存优化
  • 企业数字化转型实施中的挑战与解决方案:架构引领的战略路径
  • 《数字图像处理基础》学习05-数字图像的灰度直方图
  • 【漏洞复现】某平台-QRcodeBuildAction-LoginSSO-delay-mssql-sql注入漏洞
  • Centos安装ZooKeeper教程(单机版)
  • A011-基于SpringBoot的视频点播系统设计与实现
  • 云原生+AI核心技术&最佳实践
  • 【Android】Service
  • 2-142【软件无线电原理与应用作业】基于matlab的圆形阵列的波束形成进行仿真
  • 在目录中按扩展名分类文件(python学习)(11.1)
  • 【网络安全 | 漏洞挖掘】逻辑漏洞+无限制爆破实现业务瘫痪
  • 【WRF工具】MPAS(多尺度预测模型)-输出WRF初始和横向边界条件
  • 分数阶傅里叶变换与信息熵怎么用于信号处理?
  • web3.0 开发实践
  • 【华为HCIP实战课程三十】中间到中间系统协议IS-IS路由渗透及TAG标识详解,网络工程师
  • 大模型论文精华-20241104