element ui 的 element-tree文字显示不全的问题

在elemtn-tree 树展示的时候外面设置了固定宽度，超出的文字会隐藏，认真查看过各个嵌套节点并没有发现超出隐藏的设置。这就比较尴尬。

 

 解决方案一、给超出的文件加上滑块（缺点不够美观，如果连续都超出的话就看着比较费劲）

element 树部分的代码！
  <el-tree
　　　　class="demo-tree"
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>

　css部分

.custom-tree-node{
    overflow: scroll;
}

 

 方案二，超出部分就显示省略号 (给span固定宽度，简单粗暴，但是需求是看到全部内容呢，就有点问题呢)

.custom-tree-node{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    display: inline-block;
    width:146px
}

方案三，借鉴el-table中的有超出部分出现提示的操作，进行处理

import debounce from "throttle-debounce/debounce"

　　import { showToolTip } from '@/utils/tree-node-util.js';

<span class="things-tree-node custom-tree-node" slot-scope="{ node }" 
      @mouseenter="handleTreeMouseEnter($event,node)"
       @mouseleave="handleTreeMouseLeave">
           <span class="item">{{ node.label }}</span>
       <el-tooltip :open-delay="100"  effect="dark" ref="tooltip"  style="display:none" :content="tooltipContent" placement="top-start">
         </el-tooltip>
      </span>


data(){
  return {
 //设置tree的宽度
          treeWidth:0,
          tooltipContent:''
    }      
}
    

mounted(){

      this.treeWidth = document.querySelector('.demo-tree').offsetWidth;

  },

 

methods:{
   // 树节点鼠标划入时候状态：
    handleTreeMouseEnter(event,node){
      this.tooltipContent=  showToolTip(event,'.item',this.treeWidth,this.$refs.tooltip,this.activateTooltip)
 
    },
    handleTreeMouseLeave(evevt){
       const tooltip = this.$refs.tooltip;
      if (tooltip) {
        tooltip.setExpectedState(false);
        tooltip.handleClosePopper();
      }
    },


}

tree-node-util.js部分的内容

/* istanbul ignore next */
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = Number(document.documentMode);

/* istanbul ignore next */
const camelCase = function(name) {
  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
    return offset ? letter.toUpperCase() : letter;
  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
};


/* istanbul ignore next */
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
};

/* istanbul ignore next */
export const getStyle = ieVersion < 9 ? function(element, styleName) {
  if (!element || !styleName) return null;
  styleName = camelCase(styleName);
  if (styleName === 'float') {
    styleName = 'styleFloat';
  }
  try {
    switch (styleName) {
      case 'opacity':
        try {
          return element.filters.item('alpha').opacity / 100;
        } catch (e) {
          return 1.0;
        }
      default:
        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
    }
  } catch (e) {
    return element.style[styleName];
  }
} : function(element, styleName) {
  if (!element || !styleName) return null;
  styleName = camelCase(styleName);
  if (styleName === 'float') {
    styleName = 'cssFloat';
  }
  try {
    var computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

/* istanbul ignore next */
export function setStyle(element, styleName, value) {
  if (!element || !styleName) return;

  if (typeof styleName === 'object') {
    for (var prop in styleName) {
      if (styleName.hasOwnProperty(prop)) {
        setStyle(element, prop, styleName[prop]);
      }
    }
  } else {
    styleName = camelCase(styleName);
    if (styleName === 'opacity' && ieVersion < 9) {
      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
    } else {
      element.style[styleName] = value;
    }
  }
};
/**
 * 
 * @param {event} event 
 * @param {string} className 树元素的类名
 * @param {string|Number} treeWidth  树的宽度
 * @param {sting} tooltipContent tooltip的填写内容
 * @param {Object} tooltip tooltip对象
 * @param {function} func  防抖函数
 */
export function showToolTip(event,className,treeWidth,tooltip,func){
  const nodeChild = event.target.querySelector(className);
  const treeNodeContent = nodeChild.parentNode.parentNode;
  // const treeNodeIcon =nodeChild.parentNode.parentNode.firstChild;
  const range = document.createRange();
  range.setStart(treeNodeContent, 0);
  range.setEnd(treeNodeContent, treeNodeContent.childNodes.length);
  const rangeWidth = range.getBoundingClientRect().width;

  const treeNodeContentPadding = (parseInt(getStyle(treeNodeContent, 'paddingLeft'), 10) || 0) +
    (parseInt(getStyle(treeNodeContent, 'paddingRight'), 10) || 0);
  if ((rangeWidth + treeNodeContentPadding > treeWidth) && tooltip) {
    // TODO 会引起整个 Tree 的重新渲染，需要优化
    tooltip.referenceElm = nodeChild;
    // debugger
    tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
    tooltip.doDestroy();
    tooltip.setExpectedState(true);
    func(tooltip);
    return nodeChild.innerText || nodeChild.textContent;

  }
}