与Element的el-popover斗智斗勇

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

el-popover是element-ui一个常用的组件，但是element-ui官方文档中样式跟用法都比较局限，在使用时都需要改动样式；但在项目中使用了el-popover，想修改一下样式，一直不成功，先来看一下官方文档怎么使用的

但奇怪的是一直没有修改成功；难道是我功力不够，亦或者老眼昏花了？

咱们看下这是正常的一个使用正常使用，单纯的去展示一个弹窗

<el-popover ref="popover" popper-class="wrap" effect="dark" placement="bottom-start" 
title="当日晚间更新，入选条件（机选）" trigger="hover"></el-popover>
<img class="tip" src="../../static/images/icon/4.png" alt="" v-popover:popover>

但是咱们的需求是配合表格组件使用，接下来看我的骚操作

<el-table :data="tableData" style="width: 100%">
  <el-table-column align="center" prop="gn" label="文字" width="190">
    <template slot-scope="scope">
      <el-popover effect="dark" placement="top-start" :title="scope.row.gn" trigger="hover">
        <span class="color2" slot="reference">{{scope.row.gn|ellipsis}}</span>
  </el-popover>
    </template>
  </el-table-column>
</el-table>

处理里html，关键还的看咱们的样式修改

.wrap {
  /* 背景色 */
  max-width: 230px;
  padding: 10px !important;
  font-size: 14px !important;
  background: #03204e !important;
  border: 1px solid rgba(3, 56, 106, 0.75) !important;
}
/* 下方是去除三角箭头的代码 */
.wrap[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: rgba(3, 56, 106, 0.75) !important;
}

.wrap[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: rgba(3, 56, 106, 0.75) !important;
}

// 悬浮提示组件
.el-popover {
  padding: 10px !important;
  font-size: 14px !important;
  border: none !important;
  background-color: rgba(3, 56, 106, 0.75) !important;
}
.el-popper[x-placement^="top"] .popper__arrow::after {
  border-top-color: rgba(3, 56, 106, 0.75) !important;
}

.el-popover__title {
  color: #fff;
  font-family: "微软雅黑";
  font-size: 14px !important;
  margin-bottom: 0 !important;
}

就这样咱们就实现了需求的效果啦，在表格展示；