關於Element的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>

 

樣式修改

.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;
}