html
<el-dropdown
trigger="click"
popper-class="custom-more-dropdown-popper"
@command="handleMoreCommand"
>
</el-dropdown>
html
<style scoped>
/* ...你之前的样式... */
</style>
<style>
/* 这里不需要 :deep(),因为这是全局样式,
但我们要通过 .custom-more-dropdown-popper 来限制范围
*/
.custom-more-dropdown-popper .el-dropdown-menu {
/* 1. 设置最大高度,超过这个高度会出现滚动条 */
max-height: 300px;
/* 2. 开启垂直滚动 */
overflow-y: auto;
/* (可选) 稍微调整一下内边距,让滚动条不贴着字 */
padding-right: 5px;
}
/* (可选) 美化一下滚动条,让它看起来更现代 */
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar {
width: 6px;
}
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
</style>