需要单独写一个style样式
<div class="columnDiv" slot="reference">
<ul>
<template v-for="(item, index) in columnList1">
<el-popover
class="hoverpart"
v-if="item.canProp"
placement="right"
width="280"
popper-class="popoverDiv"
trigger="hover">
<div class="contentDiv">
<div class="div1"><span class="span1">名称：{
{item.contentName}}</span><span class="span2">统计：{
{item.count}}</span></div>
<div class="div2">最新触发：{
{item.contentName}}</div>
<div class="div3">源IP：{
{item.fromIP}}</div>
<div class="div4">目的IP：{
{item.toIP}}</div>
</div>
<li slot="reference" :key="index">{
{item.name}}</li>
</el-popover>
<li v-else :key="index">{
{item.name}}</li>
</template>
</ul>
</div> <style lang="less">
.popoverDiv{
color:#fff;
background-color: #409EFF;
.div1{
.span1{
margin-right: 20px;
}
}
}
/* .el-popper[x-placement^=left] .popper__arrow::after{
border-left-color: #409EFF;
} */
.el-popper[x-placement^=right] .popper__arrow::after{
border-right-color: #409EFF;
}
/* .el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: #409EFF;
}
.el-popper[x-placement^=top] .popper__arrow::after{
border-top-color: #409EFF;
} */
.el-popper[x-placement^=right] {
margin-left:0px;
}
</style>