vue怎么把按钮加到和el-collapse-item的title同一行
时间: 2024-01-07 20:03:20 浏览: 77
go-admin框架vue权限字符-全网最透彻讲解
可以使用 `slot` 来自定义 `el-collapse-item` 的标题,将标题和按钮放在同一行。具体步骤如下:
1. 在 `el-collapse-item` 上添加 `name` 属性,用来定义当前项的名称。
2. 在 `el-collapse-item` 上添加 `v-slot:[name]` 属性,用来自定义当前项的标题。
3. 在自定义的标题中,使用 `div` 元素将标题和按钮包裹在一起,并且添加 `display: flex` 样式,让它们在同一行显示。
以下是一个示例代码:
```html
<el-collapse>
<el-collapse-item name="item1">
<template v-slot:item1>
<div style="display: flex; justify-content: space-between;">
<span>Item 1 Title</span>
<el-button>Button</el-button>
</div>
</template>
<p>Item 1 Content</p>
</el-collapse-item>
</el-collapse>
```
在这个示例中,我们将标题和按钮放在一个 `div` 元素中,并且使用 `display: flex` 样式将它们排列在同一行。这样就可以实现将按钮加到和 `el-collapse-item` 的标题同一行的效果了。
阅读全文