elementUI的select框自定义宽度

应用场景

在中后台项目中，经常使用Select选择框。默认情况下，下拉选项框的宽度会依据选项内容的长度而改变。当选项内容过长时，下拉选项框的宽度也会相应的变长，有时甚至会超过屏幕可视范围，极其不美观。

解决方案

方案一

给el-select添加focus事件，当input获得焦点时动态获取Select宽度，然后设置el-option的宽度。效果如下

这个方法在第一次点击Select时会出现下面这种情况，因为下拉框是使用absolute定位，当focus时left已经计算完成，所以出现错位的情况，之后再点击会重新计算left值，恢复正常。

<template>
	<el-row :gutter="20">
		<el-col :span="8" :offset="16">
			<el-select style="width:100%" v-model="value" placeholder="请选择" @focus="setOptionWidth">
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					:style="{'width':selectOptionWidth}"
				></el-option>
			</el-select>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: 'CustomSelect',
	data() {
		return {
			options: [
				{
					value: '选项1',
					label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
				},
				{
					value: '选项2',
					label: '双皮奶'
				},
				{
					value: '选项3',
					label: '蚵仔煎'
				},
				{
					value: '选项4',
					label: '龙须面'
				},
				{
					value: '选项5',
					label: '北京烤鸭'
				}
			],
			value: '',
			selectOptionWidth: null
		};
	},
	methods: {
		// 下拉框弹出时，设置弹框的宽度
		setOptionWidth(event) {
			this.$nextTick(() => {
				this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
				console.log(this.selectOptionWidth);
			});
		}
	}
};
</script>

方案二 （推荐使用）

通过查看elementUI源码，看到elementUI给Select下拉框最外层设置了min-width样式。如果我们把width设置很小，那么这个下拉框的width就等于min-width，也就是Select的宽度。 基于这个思想，我们需要将Select自定义一个popper-class="my-popper",这个class将会加入到Select生成的下拉框的最外层，然后我们在公共的index.scss加入下列样式。.my-popper { width: 0; }，在循环options时别忘了添加title属性，否则看不到全部文字。效果如下

<template>
	<el-row :gutter="20">
		<el-col :span="8" :offset="16">
			<el-select style="width:100%" v-model="value" placeholder="请选择" popper-class="my-popper">
				<el-option v-for="item in options" :key="item.value" :title="item.label" :label="item.label" :value="item.value"></el-option>
			</el-select>
		</el-col>
	</el-row>
</template>

<script>
export default {
	name: 'CustomSelect',
	data() {
		return {
			options: [
				{
					value: '选项1',
					label:
						'黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
				},
				{
					value: '选项2',
					label: '双皮奶'
				},
				{
					value: '选项3',
					label: '蚵仔煎'
				},
				{
					value: '选项4',
					label: '龙须面'
				},
				{
					value: '选项5',
					label: '北京烤鸭'
				}
			],
			value: ''
		};
	}
};
</script>
<style>
.my-popper {
	width: 0;
}
</style>