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

相信不少人在使用ElementUIel-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>

你可能感兴趣的:(Vue,elementui,vue)