eltable 文字放不下_CSS妙用,el-table中字段长度显示过长怎么办

el-table中有些字段的长度太长,例如描述,备注等字段,一旦字数超过了列头宽度的限制,就会被挤下另一行,导致table的每一行的高度不一致,看起来很不美观

20200921171427759rfnc59pa09vodx3_2.png

查阅官方手册,其实是有提供一个 show-overflow-tooltip 属性的。使用了此属性的情况下,能够实现当内容过长隐藏并显示 tooltip,显示效果如下

20200921171427759rfnc59pa09vodx3_3.png

其实挺好看的,但是还是有点美中不足,鼠标不能移入tooltip进行复制,查看过官方手册中tooltip的属性,原本组件是支持的,但是写进el-table的时候不知官方处于什么考虑,将enterable默认设置为了false。

20200921171427759rfnc59pa09vodx3_0.png

没有选择的余地,业务需求又需要,于是也就只能自己重新仿造写一个了。

label="备注">

{{ scope.row.XXXX }}

{{ scope.row.XXXX | XXXX}}

{{ scope.row.XXXX}}

这里用了el-popover,其实和el-tooltip挺像的,基本用法也差不多。想限制的字体长度自己决定,再搭配上一个过滤器。

filters:{

XXXX(value){if(!value){return}else{if(value.length>16){var target=value.substr(0,16)+'....'}else{

target=value

}returntarget;

}

},

}

然后,看图

20200921171427759rfnc59pa09vodx3_1.gif

大致就这样了,但是又觉得不完美,首先,不能自适应屏幕宽度,js中的字体长度限制的不好还是会出现换行的情况,毕竟能css解决的就不要用js,于是,就又升级了一版

label="备注">

{{ scope.row.XXXX }}

{{ scope.row.XXXX}}

看出了主要差别了么,主要就是那3句css,总结下来就是不换行,超过宽度部分隐藏,文字超过宽度显示省略符号来代表被修剪的文本,代码却少了好多

果然还是老话说的好,能css解决的,就不要js解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值