摘要：
当显示元素树时，固定宽度设置在外部，超出的文本将被隐藏。仔细检查每个嵌套节点后，未发现超出隐藏范围的设置。解决方案1：将滑块的元素树中的代码添加到超出的文件{node.label｝˂/El-tree＞css部分。自定义树节点｛溢出：滚动；｝方案2，多余部分将显示省略号。自定义树节点｛溢出：隐藏；空白：nowrap；文本溢出：省略号；显示：内联块；宽度：146px｝方案3：从el表中提示多余部分的操作中学习，并从“throttle debug/debug”import｛showToolTip｝from'@/utils/tree node util处理importdebouck。js'{node.label}｝data（）｛return｛//设置树宽度treeWidth:0，tooltipContent:“”｝｝mount（）｛this.treeWidth=document.querySelector.offsetWidth；｝，方法：｛//鼠标移入时树节点的状态：handleTreeMouseEntry｛thist.tooltipContext=showToolTip｝，handleTreeMouseLeave｛consttips=this.$refs.tooltip；if｛tips.setExpectedState；tips.handleCloseOpper（）；｝}，}tree-node-util.js部分/*istanbuiligentretext*/c onsSPECIAL_CHARS_REGEXP=//g的内容；constMOZ_ HACK_ REGEXP=/^moz/；constituteVersion=数字；/*istanbilignorenext*/constcamelCase=函数{returnname.replace（SPECIAL_CHARS_REEXP，函数（_，分隔符，字母，偏移量）{returnoffset？
在elemtn-tree 树展示的时候外面设置了固定宽度，超出的文字会隐藏，认真查看过各个嵌套节点并没有发现超出隐藏的设置。这就比较尴尬。
解决方案一、给超出的文件加上滑块（缺点不够美观，如果连续都超出的话就看着比较费劲）
element 树部分的代码！ <el-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; } }
