1、el-table中show-overflow-tooltip的问题
el-table内容过多的时候可以设置 show-overflow-tooltip为 true,这样可以设置实现超出隐藏功能。
但是这个方法有些问题:
1、不能复制悬浮框里的内容;
2、内容过多时候(多到一满屏都放不下的时候),页面会晃动。
2、自定义表格显示方式
先看下效果
8.png
如果拖动表头宽度,改变列的宽度,也可以适应。
3、代码
<div v-if="showOverPopover.isOpen && isTextTooLong(scope.column,scope.row[item.fieldName])" class="textover">
<el-popover
:width="showOverPopover.width"
placement="left"
popper-class="el-popover_tableFilter"
trigger="hover">
<div class="content" :style="{'max-height':showOverPopover.maxHeight + 'px'}">
{{scope.row[item.fieldName]}}
</div>
<span slot="reference">{{scope.row[item.fieldName]}}</span>
</el-popover>
</div>
<div v-else> {{scope.row[item.fieldName]}}</div>
methods: {
//判断字段是否超出表头宽度
isTextTooLong({realWidth, width},name){
if(realWidth){
return realWidth < this.getTextWidth(name)
}else{
return width < this.getTextWidth(name)
}
},
//获取单元格字段宽度
getTextWidth(str){
var width = 0;
var html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
if(isIE()||isIE11()) {
document.querySelector('.getTextWidth').removeNode(this);
}else {
document.querySelector('.getTextWidth').remove();
}
function isIE(){
if(!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}else{
return false;
}
}
function isIE11(){
if((/Trident\/7\./).test(navigator.userAgent)){
return true;
}else{
return false;
}
}
return width;
}
}
能实现上述效果主要是能获取到列的width和realWidth 这2个字段的值(目前这个版本是可以获取到的),不拖动表头宽度的时候获取的是width字段,拖动表头后获取realWidth .
网友评论