el-table组件内容过长时显示tooltip-阿里云开发者社区

el-table组件内容过长时显示tooltip

2022-12-29 1900

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： el-table组件内容过长时显示tooltip

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;
        }
}