在VUE3+Element |
您所在的位置:网站首页 › 表格超出分钟判断 › 在VUE3+Element |
在完成公司业务的时候,表格内容太多会撑开,不太美观,需要做一些优化,发现有一些部分还是需要探讨一下。 1.Table-column 自带属性在Table-column 属性中有个属性 show-overflow-tooltip当内容过长被隐藏时显示 tooltip貌似可以直接实现该功能,但有两个缺点 (1)隐藏后只能一行显示,想多行省略加入样式 text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;之后提示会不生效了,因为自带属性的提示是根据宽度来进行判断了,而该样式是根据高度进行判断 (2)表格内容不能嵌套,否则同样样式不会生效,有格式要求非常不方便 2.利用el-tooltip组件直接上代码 html部分 js部分 const latest_apm_visit = ref(); const latestChange = (event: any) => { if (event.clientHeight < event.scrollHeight) { latestTooltipFlag.value = false; } else { latestTooltipFlag.value = true; } };css部分 .last_commoner-tip { width: 380px; } .last_commoner { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; //改变数字显示几行 -webkit-box-orient: vertical; }原理:通过css设置后,可以判断出元素的clientHeight与scrollHeight是不同的值,通过判断他们的大小,来判断提示是否进行提示,而表格内容会同时出现多个元素所以这里加入了ref,并且通过scope.$index知道是第几个元素,然后通过mouseenter事件进行传值实现,该功能就完成了,可以随意改变显示行数,只需改变-webkit-line-clamp属性即可。 其实看似方便同样也有缺点,每设置一列都需要加上上面一串代码,想要进行封装但是由于ref的存在,封装难度加大,各位大佬如果有好的封装方法欢迎解答。 由于感觉不是最优解法,于是打算尝试换种优化,不再超出内容展示了,而是点击展示所有内容,由省略到展示全部。实现并不难,这里不再赘述了,如果各位大佬有更好的方法,欢迎交流。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |