vue修改popover的时候,样式不生效,脑阔很疼啊,官网的文档也说得不清不出的,后面google了一圈,终于解决了,修改方式如下:1.使用popper-clas 定义样式信息,2.创建对应的css的class .el-popover.my-el-popover 这种格式,前缀是.el-popover ,不然不生效。

组件地址
https://element.eleme.cn/#/zh-CN/component/popover

文档中,propper-class 也就一句话,为popper添加类名。

Vue之popover修改样式不生效-yellowcong_vue

配置el-popover属性信息

<el-popover
        placement="top-start"
        width="280"
        trigger="hover"
        popper-class="my-el-popover"
        style="float: right;margin-right: 12px;"
      >
  <el-table :data="gridData">
    <el-table-column width="180" property="key" label="配置项"></el-table-column>
    <el-table-column width="70" property="value" label="默认值"></el-table-column>
  </el-table>
  <el-button slot="reference">配置项</el-button>
</el-popover>

添加样式,一定不要加scoped

<style lang="scss">
  .el-popover.my-el-popover {
    height: 50%;
    overflow: scroll;
  }
</style>

实现效果

Vue之popover修改样式不生效-yellowcong_默认值_02