vue element表格某一列内容过多,超出省略号显示的实现
目录
- element表格某一列内容过多,超出省略号显示
- 这样就好了,效果如下
- element-UI table文字超出两行,隐藏多余文字,移入显示tips
- element-UI表格的列属性
- 超出两行隐藏多余文本,移入时tips显示全部内容
- 超出的文本的隐藏
- 文本超过两行,移入时tips显示全部内容
- 通过长度判断
element表格某一列内容过多,超出省略号显示
在使用element组件库里面的table组件时,遇到某一个字段内容过多,导致td高度被撑开,布局显得很不美观,像这样
这时我们只要给table-cloumn添加一个属性show-overflow-tooltip,
<el-table-column label="描述" :show-overflow-tooltip='true'> <template slot-scope="scope"> <span>{{scope.row.ms}}</span> </template> </el-table-column>
实现超出隐藏,并有提示,这样的话会有下面效果:
提示的长度特别长,超出了屏幕,不太好看。
可以在处理下样式,如下:
<style> .el-tooltip__popper{ max-width:20%; } .el-tooltip__popper,.el-tooltip__popper.is-dark{ background:rgb(48, 65, 86) !important; color: #fff !important; line-height: 24px; } </style>
这样就好了,效果如下
如果想要设置,显示几行,超过指定的值再隐藏,可以参考下面
element-UI table文字超出两行,隐藏多余文字,移入显示tips
element-UI表格的列属性
通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。
超出两行隐藏多余文本,移入时tips显示全部内容
我们想完成的是超出两行才用省略号隐藏多余文本,并且移入才会有tips显示;两行以内的文本则不隐藏也不显示tips。
超出的文本的隐藏
.myNote{ display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient:vertical; }
文本超过两行,移入时tips显示全部内容
<!-- tips悬浮提示 --> <el-tooltip placement="top" v-model="scope.row.showTooltip" :open-delay="500" effect="dark" :disabled="!scope.row.showTooltip"> <div slot="content">{{scope.row.note}}</div> <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div> </el-tooltip>
注意! 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。
showTips(obj, row){ /*obj为鼠标移入时的事件对象*/ /*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/ let TemporaryTag = document.createElement('span'); TemporaryTag.innerText = row.note; TemporaryTag.className = 'getTextWidth'; document.querySelector('body').appendChild(TemporaryTag); let currentWidth = document.querySelector('.getTextWidth').offsetWidth; document.querySelector('.getTextWidth').remove(); /*cellWidth为表格容器的宽度*/ const cellWidth = obj.target.offsetWidth /*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/ currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true }
通过长度判断
一开始我是想通过表格高度去判断,但是后来发现,高度不是一个固定不变的值,会随着移入移出变化,并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断,把文本宽度与容器宽度比较,这样得到的值才是固定不变的。
有朋友说会出现多个tips,我是直接放在el-table-column的template里面的,目前没发现这种情况。
<el-table-column prop="note" label="简介"> <template slot-scope="scope"> <!-- tips悬浮提示 --> <el-tooltip placement="top" v-model="scope.row.showTooltip" :open-delay="500" effect="dark" :disabled="!scope.row.showTooltip"> <div slot="content">{{scope.row.note}}</div> <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div> </el-tooltip> </template> </el-table-column>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)