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

news/2024/12/26 19:17:38/

问题:

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.ppmy.cn/news/1544346.html

相关文章

php实现sl651水文规约解析

SL651-2014-《水文监测数据通信规约》 1、要素解析说明 39 23 00 00 03 45 0x39查标识符得知为:39H Z 瞬时河道水位、潮位,我们定义为水位 0x23 按照要素标识符的规定,高5bit,低3bit,00100 011 对应的转换为10进制为4与3,也就是水位数据占用4字节,小…

Cocos使用精灵组件显示相机内容

Cocos使用精灵组件显示相机内容 1. 为什么使用精灵渲染 在游戏引擎中&#xff0c;游戏场景内除webview和video外所有的节点都是渲染在Canvas上&#xff0c;这导致了webview和video只能存在于所有节点的最上层或最下层&#xff0c;而这种层级关系会出现节点事件无法正常监听或者…

【1】Excel快速入门的核心概念

1. 工作表 基本工作表 图表工作表 工作表视图 2.表格(Table)&#xff0c;套用表格格式 ​ 名称&#xff08;表&#xff0c;列&#xff09; ​ 结构化引用[列名] ​ 设置表格样式 -可自定义&#xff08;如报表类&#xff09; ​ 数据验证 -交互 &#xff08;输入/输出交…

MATLAB/Simulink学习|在Simulink中调用C语言-04使用C Function 实现PI运算(使用模块自定义代码-仿真自定义代码)

在上一篇博客中&#xff0c;介绍了如何使用C Function 实现PI运算&#xff0c;但是在模块内编辑C代码&#xff0c;而不能直接调用已经写好了的C代码。 在Simulink中使用C Function调用自定义代码有两种方法&#xff0c;本篇博客介绍其中一种方法。 添加头文件和源文件 在实际…

P10424 [蓝桥杯 2024 省 B] 好数 题解

题目名字 P10424 [蓝桥杯 2024 省 B] 好数 题解 题目链接 题意 给一个整数n&#xff0c;从1到n这个区间范围内&#xff0c;每一个数位为偶数的数字为偶数且数位为奇数的数字为奇数&#xff0c;那么这个数就是好数 思路 首先确认所有的条件都必须要满足&#xff0c;奇对奇&…

ubuntu20安装opencv3.2记录

系统环境 ubuntu20安装了ros-noetic&#xff0c;所以系统默认装了opencv4.2.0&#xff0c;但是跑fastlivo推荐的是opencv3.2.0&#xff0c;而且海康相机别人写的ros驱动&#xff08;海康相机ros驱动&#xff09;也是需要opencv3.2.0&#xff0c;最终还是选择安装多版本的openc…

第三十章 章节练习商品列表组件封装

目录 一、需求说明 二、技术要点 三、完整代码 3.1. main.js 3.2. App.vue 3.3. MyTable.vue 3.4. MyTag.vue 一、需求说明 1. my-tag 标签组件封装 (1) 双击显示输入框&#xff0c;输入框获取焦点 (2) 失去焦点&#xff0c;隐藏输入框 (3) 回显标签信息 (4) 内…

LeetCode 2487.从链表中移除节点

题目&#xff1a; 给你一个链表的头节点 head 。 移除每个右侧&#xff08;右侧所有&#xff09;有一个更大数值的节点。 返回修改后链表的头节点 head 。 思路&#xff1a; 代码&#xff1a; class Solution {public ListNode removeNodes(ListNode head) {head revers…