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添加类名。
配置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>
实现效果