element ui table tooltip设置宽度
element-ui的table列超出部分省略加悬浮提示 并设置tooltip 宽度vue项目中 给element ui的 table 表格某一列添加超出部分省略加悬浮提示 ::show-overflow-tooltip="true"实例代码如下<el-table-column:show-overflow-tooltip="true" prop="ad...
·
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容易导致布局污染,所以建议可写在公共样式里,完成的效果:
更多推荐
已为社区贡献1条内容
所有评论(0)