怎么把el-collapse中的一个el-collapse-item里增加一个和title同一行的按钮,并且文字在这一行的最左边,按钮在这一行的最右边
时间: 2024-02-21 17:02:26 浏览: 199
实现上图标下文字,左图标右文字,右文字左图标设置的按钮
您可以在el-collapse-item中添加一个自定义的插槽,将按钮和标题放在同一行。示例代码如下:
```
<el-collapse-item title="标题">
<template v-slot:title>
<div class="title-wrapper">
标题
<el-button class="button" type="primary">按钮</el-button>
</div>
</template>
内容
</el-collapse-item>
```
然后通过样式将标题和按钮放在同一行,并且按钮在最右边。示例样式如下:
```
.title-wrapper {
display: flex;
justify-content: space-between;
}
.button {
margin-left: auto;
}
```
注意,这里使用了flex布局将标题和按钮放在同一行,使用了margin-left: auto将按钮放在最右边。
阅读全文