一 使用
<el-popover placement="right" :width="400" trigger="click">
<template #reference>
<el-button style="margin-right: 16px">Click to activate</el-button>
</template>
<el-table :data="gridData">
<el-table-column width="150" property="date" label="date" />
<el-table-column width="100" property="name" label="name" />
<el-table-column width="300" property="address" label="address" />
</el-table>
</el-popover>
二 调整上下距离
第一步:定义一个类
第二步: 设置样式, 在公共样式中设置才起效果
<el-popover :width="280" trigger="click" popper-class="equity_info" placement="right">
<template #reference> <div class="rights">权益信息</div> </template>
<div class="network_content">
<div class="title">全网线索补全</div>
<div class="network_content_detail">
<div class="detail_title"
>已消耗/总量
<el-tooltip
class="box-item"
effect="dark"
placement="right"
:enterable="false"
:hide-after="0"
>
<template #content>
已消耗积分:<br />
实际消耗积分和当前冻结积分之和<br />
(当前冻结积分将根据实际消耗情况进行扣减)
</template>
<el-icon style="position: relative; top: 2px" size="14px"><Warning /></el-icon>
</el-tooltip>
</div>
<div class="detail_content"> <span style="color: #477fff">1000</span>/5000</div>
</div>
<div class="network_content_detail">
<div class="detail_title">有效期止 </div>
<div class="detail_content">2024-12-31</div>
</div>
</div>
</el-popover>
.equity_info {
top: 10px !important;
.el-popper__arrow {
top: 15px !important;
}
}
三 el-popover嵌套el-tooltip
移入到el-tooltip,后边的el-popover消失了
解决: 不让他移入,只在标签上能看提示,移入消失
:enterable="false"//鼠标是否可进入到 tooltip 中
但是会抽搐一下
解决:
:hide-after="0"//延迟关闭,单位毫秒