element ui table tooltip设置宽度

element-ui的table列超出部分省略加悬浮提示 并设置 tooltip 宽度

 

vue项目中 给element ui的 table 表格某一列添加超出部分省略加悬浮提示  :

:show-overflow-tooltip="true"

  实例代码如下 

<el-table-column  :show-overflow-tooltip="true" prop="address" label="详细地址">
</el-table-column>

 可以让内容在一行显示并且出现tooltip,但是通常就会出现这样的效果 默认占满全屏：

于是就需要修改tooltip的样式，代码如下：

  .el-tooltip__popper {
    max-width: 60%!important;  //宽度可根据自己需要进行设置 
  }

注意：

如果直接把这个样式写在同页面的scoped中亲测不会生效，但是不加scoped容易导致布局污染，所以建议可写在公共样式里，完成的效果：