el-dropdown有el-dropdown-item时显示button没有不显示button
时间: 2023-07-16 07:15:07 浏览: 139
`el-dropdown` 组件的 `trigger` 属性可以控制下拉菜单的触发方式,当 `trigger` 属性值为 `'click'` 时,会显示一个按钮,当属性值为 `'hover'` 时,不会显示按钮,而是在鼠标悬停在触发元素上时直接展开下拉菜单。
因此,如果你希望 `el-dropdown` 在含有 `el-dropdown-item` 的情况下始终显示按钮,可以将 `trigger` 属性设置为 `'click'`。示例代码如下:
```html
<el-dropdown trigger="click">
<span class="el-dropdown-link">
点击触发下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu>
<el-dropdown-item>菜单项一</el-dropdown-item>
<el-dropdown-item>菜单项二</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
```
相关问题
<div> <el-button @click="showClick">show</el-button> </div> <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px"> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>Action 1</el-dropdown-item> <el-dropdown-item>Action 2</el-dropdown-item> <el-dropdown-item>Action 3</el-dropdown-item> <el-dropdown-item disabled>Action 4</el-dropdown-item> <el-dropdown-item divided>Action 5</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> 这段代码应该如何添加show方法
你可以在该组件的 methods 中添加一个名为 showClick 的方法,然后在该方法中获取到 ref 为 dropdown1 的 el-dropdown,并调用它的方法来显示下拉菜单。代码如下:
```html
<template>
<div>
<el-button @click="showClick">show</el-button>
<el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script>
export default {
methods: {
showClick() {
this.$refs.dropdown1.show();
},
},
};
</script>
```
在这个示例中,我们在 el-button 上绑定了一个 click 事件,并且在 methods 中定义了一个名为 showClick 的方法。在该方法中,我们通过 $refs 获取到了 ref 为 dropdown1 的 el-dropdown,并调用了它的 show 方法来显示下拉菜单。
<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。
阅读全文