vue+elementUi+selsct之下拉菜单最后一项显示不全问题:popper-append-to-body=“false“deepoptionlesssassscss

Posted 2022-06-11 web半晨

目录

• 1、问题演示
• 2、分析
• 3、最终效果

---

1、问题演示

---

2、分析

是因为margin值不合理导致的显示不全，在尝试使用::v-deep与/deep/修改下拉选项的margin-bottom: 0 !important;，依然没有解决。经过分析页面的DOM结构，select默认挂在body上，导致无法修改样式。最后，通过在select标签上设置:popper-append-to-body="false"字段，使select挂载在当前页面，即可进行样式修改。

<el-select
	v-model="ruleForm.type"
	clearable
	:popper-append-to-body="false"
	placeholder="请选择"
	@change="changeType"
	@clear="clears"
>
	<el-option label="文章学习" value="1"></el-option>
	<el-option label="视频学习" value="2"></el-option>
</el-select>

// 下拉框最后一个显示不完全
/deep/.el-select-dropdown__wrap.el-scrollbar__wrap 
	margin-bottom: 0 !important;

注意：style标签一定是使用了某种编译（less/sass/scss等，scoped属性规定样式只在当前文件下起作用）才可以使用::v-deep或/deep/修饰样式选择符。

---

3、最终效果