最近参与web开发时,让我解决一个elementui控制内容单行显示,多余部分用省略号代替并且在鼠标滑过时弹出显示,emmm,作为web小白,着实有点难搞,还好我有度娘,在一番查询后发现网上推荐用
show-overflow-tooltip属性 试了一下,还挺好使,但是缺点就是弹出框直接一行到底,占满了屏幕,体验感着实不大好,直接说解决办法 通过..el-tooltip__popper这个属性可对弹框进行设置,需要注意的是,不要写道scope中,可以单独开一个<style>样式写这个
<el-table-column
label="备注"
prop="remark"
show-overflow-tooltip
width="300px"
>
</el-table-column>
<style>
.el-tooltip__popper {
max-width: 300px; /*修改宽度*/
font-size: 14px;
}
</style>
效果如图