【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决

1、自定义样式

复制代码
<template>
  <el-select v-model="value" style="width: 150px">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
    <el-option label="选项三" value="option3"></el-option>
  </el-select>
</template>
.el-select-dropdown__item {
  background-color: #e6f7ff;
  color: #333;
}

参考

2、下拉框宽度自适应或自定义

  • 如果需要使下拉框的宽度和选项框一致,可以设置::fit-input-width="true"
    参考代码:
javascript 复制代码
<el-select v-model="form.name" clearable filterable :fit-input-width="true">
	<el-option v-for="item in List" :key="item.id" :value="item.value" :title="item.value" />
</el-select>

选项的超出部分就会变成...

  • 如果要自定义下拉框的宽度,则可以参考如下代码实现
javascript 复制代码
<el-select v-model="value" :popper-append-to-body="false" popper-class="my-select">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :title="item.label"
  >
  </el-option>
</el-select>
 
<style>
.my-select .el-select-dropdown__item {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

选项的超出部分就会变成...参考(里面还有种方法是用横向滚动条,但感觉用户体验会不太好,pass)

补充:如果不希望选项超出部分变成...,直接都完整展示每个选项。可以参考下面的写法:

(我还没试过;是群里uu提供的)

3、选项过长且为...之后的优化

如果选项后面的内容变成了...,肯定是要优化一下的,不然用户体验也不好。

鼠标悬浮上去后展示完整内容(简单版)

这有个最简单的实现方法,上面2段代码中其实也已经出现了::title="item.label"

鼠标悬浮后展示完整内容(结合el-tooltip版)

el-select 下拉框选项文字内容过长

(没试过- -)

4、扩展:

el-select的远程加载选项写法;可以学一学
vue3+ts+element plus自定义el-select下拉选择器组件封装

相关推荐
用户99045017780093 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家6 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript