当前位置: 首页 > Web前端 > vue.js

el-table自定义字段内容加el-tooltip

时间:2023-03-31 15:54:09 vue.js

table-tooltip组件中外层元素和内层元素的样式写在style中。正常添加tooltip后,无论内层元素的长度是否大于外层元素的宽度,都会显示tooltip。所以需要根据外层元素的宽度加一层判断放到tooltip的disabled中。虽然我们可以在组件初始化的时候在mounted中获取父子元素的宽度,但是当表单域的宽度发生变化时,它无法实时响应disabled值。您可能会想到使用手表来监控元素的宽度。但是在实际的vue中,是无法监听dom的长宽的,所以这里我们使用自定义指令,添加本地指令来监听元素宽度的变化。代码如下:.t-tooltip{高度:100%;底部边距:4px;分词:break-all;溢出:隐藏;文本溢出:省略号;行高:18px;&-content{空白:nowrap;分词:break-all;}}