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 .