el-dropdown下拉框宽度和按钮宽度一致
时间: 2023-12-07 20:45:21 浏览: 557
你可以通过设置 `el-dropdown` 组件的 `width` 属性来使下拉框的宽度与按钮宽度一致。首先,你需要给按钮设置一个固定的宽度,然后将该宽度赋值给 `el-dropdown` 组件的 `width` 属性。以下是一个示例:
```html
<template>
<div>
<el-dropdown :width="buttonWidth">
<el-button slot="trigger" :style="{ width: buttonWidth }">下拉菜单</el-button>
<el-dropdown-menu slot="dropdown">
<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-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
buttonWidth: '120px' // 设置按钮宽度
}
}
}
</script>
```
在上面的示例中,我们通过 `buttonWidth` 变量来设置按钮的宽度为 `120px`。然后,我们将该变量赋值给 `el-dropdown` 组件的 `width` 属性,以使下拉框的宽度与按钮宽度保持一致。
请根据你的实际需求调整按钮的宽度和样式。
阅读全文
相关推荐


















