如何使用自定义样式处理elmentUI的el-table的使用show-overflow-tooltip时tooltip太宽的问题

方式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
}