怎样对每个<el-descriptions>标签的右侧中间位置显示一个操作按钮了。您可以根据需要对按钮的样式进行调整。
时间: 2024-02-28 16:52:32 浏览: 104
RM-MPU-9250A-00.pdf
您可以使用CSS样式对操作按钮的位置和样式进行调整。可以在`<template>`标签中添加一个`<div>`标签,并为它设置一个类名,如`class="operation-btn"`。然后在CSS样式中添加以下代码来对按钮的位置和样式进行调整:
```css
.operation-btn {
position: absolute; /* 绝对定位 */
right: 10px; /* 距离右侧10像素 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 垂直居中 */
}
```
这样就可以将按钮放置在每个`<el-descriptions>`标签的右侧中间位置,并进行样式调整。具体实现代码如下所示:
```html
<div v-for="apiData in apiList" style="overflow-y: auto">
<el-descriptions :title="apiData.apiName"
style="border-top: 1px solid #ccc; color: #4f9bff; border-bottom: 1px solid rgba(204,204,204,0);">
<el-descriptions-item label="api类型">
<dict-tag :options="belongOptions" :value="apiData.apiType"/>
</el-descriptions-item>
<el-descriptions-item label="url的后缀">
{{ apiData.apiExposeurl }}
</el-descriptions-item>
<el-descriptions-item label="校验appkey">
<dict-tag :options="appkeyOptions" :value="apiData.ischeck"/>
</el-descriptions-item>
<el-descriptions-item label="请求方式">
{{ apiData.requestMethod }}
</el-descriptions-item>
<el-descriptions-item label="来源表">
{{ apiData.apiTable }}
</el-descriptions-item>
<template slot="extra">
<div class="operation-btn">
<el-button type="primary" size="small">操作</el-button>
</div>
</template>
</el-descriptions>
</div>
```
您可以根据需要调整CSS样式中的参数,来实现不同的按钮位置和样式。
阅读全文