方式1:直接在非scoped包裹的style样式中修改.el-tooltip__popper 的样式即可。这种不属于自定义样式不在叙述
方式2:使用给tooltip-effect传递属性的方式。el-table的show-overflow-tooltip使用之后会在body中添加一个el-tootip的内容,表格中所有的需要展示tooltip的内容都会使用同一个el-tootip。
当表格中的内容太多,如果不能使用修改.el-tooltip__popper的方式去修改宽度,只能通过自定义样式的方式,方法如下
<el-table tooltip-effect="dark myClass" :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
这里的myClass就是自定义的样式,可以通过查看源码的方式找到原理,原理:tooltip-effect这个属性拿到之后会传递给el-table 的el-tooltip,在el-tooltip内部(下面是el-tooltip的源码)会生成样式为:
el-tooltip__popper is-dark myClass
<div
onMouseleave={ () => { this.setExpectedState(false); this.debounceClose(); } }
onMouseenter= { () => { this.setExpectedState(true); } }
ref="popper"
role="tooltip"
id={this.tooltipId}
aria-hidden={ (this.disabled || !this.showPopper) ? 'true' : 'false' }
v-show={!this.disabled && this.showPopper}
class={
['el-tooltip__popper', 'is-' + this.effect, this.popperClass]
}>
{ this.$slots.content || this.content }
</div>
这样在el-table加一个属性就可以直接作用到el-tooltip上。同时可以不通过修改el-tooltip__popper的方式去修改tooltip的样式
使用下面的方式就可以修改样式了
.el-tooltip__popper.is-dark.myClass{
max-width: 480px
}