美文网首页
el-table组件内容过长时显示tooltip

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

作者: _littleTank_ | 来源:发表于2020-04-29 11:19 被阅读0次

    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 .

    相关文章

      网友评论

          本文标题:el-table组件内容过长时显示tooltip

          本文链接:https://www.haomeiwen.com/subject/pxoguhtx.html