Dropdown 下拉框(el-dropdown-menu)内容过长显示‘...’ 鼠标悬浮显示全部

2023-11-15

问题描述

使用element的Dropdown 下拉框(el-dropdown-menu)内容过长显示‘…’ 鼠标悬浮显示全部
有时候内容太长导致文字换行与其它文字折叠展示
如下图所示:

在这里插入图片描述


解决方案:

直接上代码:

<el-dropdown-menu  slot="dropdown">
   <el-dropdown-item
      class="region-item-style"
      :command="item.id"
      v-for="(item, index) in region"
      :key="index"
       :title="item.regionName">
       {{ item.regionName }}
       </el-dropdown-item>
 </el-dropdown-menu>

style样式实现文字过长后显示“…”:

.region-item-style {
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

其中::title="item.regionName"鼠标放上去展示全部。

修改后的样式为:

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Dropdown 下拉框(el-dropdown-menu)内容过长显示‘...’ 鼠标悬浮显示全部 的相关文章

随机推荐

  • Unity3D——简单入门知识以及实现鼠标控制物体移动、旋转

    是时候拿出小本本整理一下最近游戏设计课程的东西辣 简单的背景知识 Unity3D由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏 建筑可视化 实时三维动画等类型互动内容的多平台的综合型游戏开发工具 是一个全面整
  • 用Python编写《唐僧大战白骨精》简单小游戏

    游戏规则 1 无论用户选择什么角色 都会以 唐僧 角色进行游戏 选择后会显示选择的角色以及攻击力和生命值 2 唐僧可以进行的选择有三个 练级 打BOSS 逃跑 当唐僧选择练级 生命值和攻击力会提升 当唐僧选择打BOSS 双方会交替互相攻击
  • 光线传感器的定义、组成、原理、类型及应用

    光线传感器的定义 光线传感器是一种可以检测光线强度的电子传感器 它可以检测到周围环境的光照强度 它是一种常用的传感器 用于检测环境的光线 可以用来控制电子设备的开关 例如自动灯光 安全系统 自动窗帘等 光线传感器的组成 光线传感器由光电探测
  • JMM内存模型

    Java内存模型即Java Memory Model 简称JMM JMM定义了Java 虚拟机 JVM 在计算机内存 RAM 中的工作方式 JVM是整个计算机虚拟模型 所以JMM是隶属于JVM的 如果我们要想深入了解Java并发编程 就要先
  • Python简单介绍

    在这里插入代码片 提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 Python概述 二 Python的特点 三 Python的缺点 四 Python的应用领域 前言 想要学会一门计算机语言 一定要对这门
  • unity物体四种移动方法总结

    目录 一 通过修改位置来实现移动 二 通过物理系统实现位移 三 通过输入控制物体移动 一 通过修改位置来实现移动 利用修改Transform组件的position的两种常用方法 1 使用Translate 函数 2 直接指定新的位置 将上述
  • laravel的安装

    1 环境是linux 2 首先确保你的linux安装了composer http www golaravel com laravel docs 5 1 3 添加PATH变量 a vim etc profile b 在文件末尾加上 expor
  • windows下minikube安装启动

    1 windows下minikube安装启动 1 1 第一版 1 1 1 安装minikube 直接使用官方安装包安装 minikube installer exe 点击运行安装即可 1 1 2 安装kubectl 直接下载放置F kube
  • fname什么意思matlab,matlab中f(:,1)是什么意思 matlab中f(:,:,3)是什么意思?

    导航 网站首页 gt matlab中f 1 是什么意思 matlab中f 3 是什么意思 matlab中f 1 是什么意思 matlab中f 3 是什么意思 相关问题 匿名网友 f 1 就是取f 矩阵的第1列 f 1 2 3 3 4 6 7
  • 神州三层交换机IPV6各种路由配置

    一 基础配置 SW1 CS6200 28X EI gt ena CS6200 28X EI conf CS6200 28X EI config host SW1 SW1 config ipv6 enable SW1 config vlan
  • 关系模型知识点总结(3)—— 关系操作中的关系代数(含题目及详细分析)

    关系代数 一 前言 二 概述 三 传统的集合运算符 1 概述 2 并 3 交 4 差 5 笛卡儿积 四 专门的关系运算 1 概述 2 记号 3 象集 4 选择 5 投影 6 连接 等值连接 自然连接 7 悬浮元组 外连接 左外连接 右外连接
  • 托管和非托管的区别

    NET Framework 是一种新的计算平台 它简化了在高度分布式 Internet 环境中的应用程序开发 NET Framework 旨在实现下列目标 提供一个一致的面向对象的编程环境 而无论对象代码是在本地存储和执行 还是在本地执行但
  • AIX系统修改系统时间

    linux下用date s 20131215 09 02 25 把时间设为2013年12月15日9点2分25秒 而aix呢 它不认 s这个参数 date n mmddHHMMYY mm表示月分 dd表示日期 HH表示小时 MM表示分钟 YY
  • 关于最近面试的通过2个offer然后被刷

    一个是面试通关了 薪资也谈好了 然后发offer 时候跟我说跟别人名字搞错了 浪费我我的时间 还有一个人面试通过 也给我发了面试通过的 也给我发了offer工资也谈拢了 说需要一周的审批 然后后面问我工作年限 说我不够工作年限 要求之前多少
  • qq讨论组显示连接服务器异常,QQ讨论组出现大面积故障 腾讯回应:因服务器异常 已紧急修复...

    原标题 QQ讨论组出现大面积故障 腾讯回应 因服务器异常 已紧急修复 TechWeb报道 8月25日消息 今天上午 大量网友反映称QQ讨论组功能出现Bug 具体症状为 在讨论组内发送一条信息就会被自动创建一个新的讨论组 而且历史消息记录全部
  • 【满分】【华为OD机试真题2023B卷 JAVA&JS】最长公共后缀

    华为OD2023 B卷 机试题库全覆盖 刷题指南点这里 最长公共后缀 知识点排序 时间限制 1s 空间限制 256MB 限定语言 不限 题目描述 编写一个函数来查找字符串数组中的最长公共后缀 如果不存在公共后缀 返回固定字符串 Zero 补
  • matplot 画条形图

    import matplotlib pyplot as plt import numpy as np import pandas as pd plt show America New York 1251 Unknown 521 Americ
  • 18724 二叉树的遍历运算

    先序遍历的顺序是 根左右 中序遍历的顺序是 左根右 l1表示先序遍历的左边界 r1表示先序遍历的右边界 l2表示中序遍历的左边界 r1表示中序遍历的右边界 下面以题目的输入样例为例做分析 输入样例 abcde bcade 当i到达最后落点时
  • 毕设—基于树莓派的家居环境智能监测系统设计与实践

    一 资料查找工具 英文文献 Sci Hub Academic Navigation Site To remove all barriers in the way of science 中文文献 VPN书童图书馆 知网免费下载知网免费入口论文
  • Dropdown 下拉框(el-dropdown-menu)内容过长显示‘...’ 鼠标悬浮显示全部

    问题描述 使用element的Dropdown 下拉框 el dropdown menu 内容过长显示 鼠标悬浮显示全部 有时候内容太长导致文字换行与其它文字折叠展示 如下图所示 解决方案 直接上代码