element-plus中表格el-table使用show-overflow-tooltip修改气泡框宽度失败解决办法
以前用的是vue2.x,组件库是element ,做项目是用过show-overflow-tooltip,但是印象中没有修改过它的样式。目前用的是vue3搭配element-plus,使用了show-overflow-tooltip,但是发现内容过长时,宽度沾满100%,网上都是说修改.el-tooltip__popper,但是我修改以后毫无反应,不管是写在<style lang='css'
以前用的是vue2.x,组件库是element ,做项目是用过show-overflow-tooltip,但是印象中没有修改过它的样式。
目前用的是vue3搭配element-plus,使用了show-overflow-tooltip,但是发现内容过长时,宽度沾满100%,网上都是说修改.el-tooltip__popper,但是我修改以后毫无反应,不管是写在<style lang='css'></style>
里还是写在一个公共的css文件里,再引入都没有反应。
于是,我打开控制栏想查看节点样式结果发现是这样的
这里因为气泡框是悬浮触发,鼠标离开就不见了,不能点击控制台查看节点样式,可以在悬浮在表格上,出现气泡框以后,f12打开控制台,按↓移动到目标节点,就是新插入的节点–气泡框,按→进入节点里面。
从图中可以看到,包裹悬浮内容的类是.el-popper
。将之前.el-tooltip__popper
改过来
<style lang="css">
.el-popper {
font-size: 14px;
max-width: 600px;
}
</style>
就可以了,不确定是不是element和element-plus之间的差异,手头没有element的项目,希望哪位路过的可以瞅瞅自己用element的项目,看看show-overflow-tooltip属性创建的气泡框,class是.el-popper
,还是.el-tooltip__popper
,帮忙验证一下。
更多推荐
所有评论(0)