el-dropdown高度设置
时间: 2023-05-19 18:02:47 浏览: 45
可以通过设置el-dropdown-menu的max-height属性来控制el-dropdown的高度。例如:
<el-dropdown>
<span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown" max-height="200px">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
相关问题
el-dropdown设置高度 且可上下滑动但看所有行
您可以在 el-dropdown 中使用 el-scrollbar 组件,将其包裹在一个具有固定高度的容器中。这样,当下拉菜单的高度超过容器高度时,就会出现滚动条,您可以通过滚动条滚动查看所有行。下面是一个示例代码:
```html
<el-dropdown>
<span class="el-dropdown-link">下拉菜单</span>
<el-dropdown-menu slot="dropdown">
<div class="scroll-container" style="height: 200px;">
<el-scrollbar>
<el-dropdown-item v-for="item in items" :key="item.id">{{ item.name }}</el-dropdown-item>
</el-scrollbar>
</div>
</el-dropdown-menu>
</el-dropdown>
```
其中,`.scroll-container` 是一个具有固定高度的容器,您可以根据需要设置其高度。`.el-scrollbar` 是 el-scrollbar 组件,用于提供滚动条功能。`.el-dropdown-item` 是 el-dropdown-item 组件,用于显示下拉菜单中的每一项。`items` 是一个数组,包含需要显示的所有项的数据。
<template slot-scope="scope" class="slot"> <el-row> <el-col :span="12"> <el-button type="text" size="small">编辑</el-button></el-col> <el-col :span="12"> <el-dropdown> <el-button style="color:#1890ff;border: none" size="small"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>关闭</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> <el-dropdown-item>作废</el-dropdown-item> <el-dropdown-item>打印</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-row> </template>为什么高度没有显示完整
这段代码没有明确指定容器的高度,所以容器的高度是由其内部的内容撑开的。如果内容过多,高度就会超出容器的限制,导致显示不完整。可以通过给 el-row 或 el-col 组件设置固定的高度或者使用 CSS 的 overflow 属性来控制容器的高度和内容的显示方式。例如,可以给 el-row 组件添加一个 class,然后通过 CSS 来设置其高度和 overflow 属性,如下所示:
```
.slot {
height: 40px;
overflow: hidden;
}
```
这样就能够限制容器的高度,并且超出部分会被隐藏。如果需要显示滚动条,可以将 overflow 属性设置为 auto 或 scroll。