解决ElementUI下拉框宽度过长问题

最新推荐文章于 2026-04-30 09:00:12 发布

原创最新推荐文章于 2026-04-30 09:00:12 发布 · 6.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

Vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

本文提供了一个针对ElementUI中el-select组件下拉框宽度过长的解决方案。通过监听焦点事件，动态设置无数据时的最小宽度，确保下拉框适配父元素宽度。

相信不少人在使用ElementUI的el-select组件都会遇到下拉框宽度过长的问题。以下是解决方案。

	<template>
		<div>
			// 省略若干无关代码
			<el-select
				@focus = 'setMinWidthEmpty'
				style = 'width: 200px'
				// 其他属性 xxxx
				>
				<el-option
					// 其他属性xxx
					></el-option>
			</el-select>
		</div>
	</template>
	
	<script>
		// 省略若干无关代码
		methods: {
			setMinWidthEmpty (val) {
				// 无数据的情况下，给请选择提示设置最小宽度
				let domEmpty = document.getElementsByClassName('el-select-dropdown')
				if(doEmpty.length > 0) {
					domEmpty[0].style['min-width'] = val.srcElement.clientWidth + 2 + 'px'
				}
			}
		}
	</script>