elementui 在表格单元格中添加el-tooltip,并在el-tooltip中添加走马灯图片,设置图片下方的横条宽度。

elementui 在表格单元格中添加el-tooltip,并在el-tooltip中添加走马灯图片,设置图片下方的横条宽度。,第1张

描述:项目中使用的elementui-ui版本是2.8.2。 业务需求:在文字上添加提示框,并在提示框中添加走马灯图片。 问题1:在添加完图片后,图片过多时,下方横条会换行,于是调整横条css,最终达到如下效果。

1. 前端html代码,需要注意的是这里图片的宽度和高度写固定了,这个可以调整,图片下方加了字,是图片的名称。

 
            

2. 本页代码所需的css。

3.记录一下调试图片下方横条过程。

第一步:右键图片下方的横条,选择“检查”

 第二步:进入浏览器调试页面,找到横条所对应的css

第三步:在对应的css上修改width值,调到合适的值记住。

第四步:复制class内容放到页面中,这个时候要查看是否起作用,因为有优先级限制,有些自定义的css不起作用,这个时候要把上一级对应的class名称加上。

 本页面自定义优先级高,所以直接复制上去就起作用了。

 

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1321788.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-12
下一篇2022-06-12

发表评论

登录后才能评论

评论列表(0条)

    保存