https://blog.csdn.net/qq_34169240/article/details/100140534
轉(zhuǎn)自：https://blog.csdn.net/Beam007/article/details/84305216
element ui的el-tree文字顯示不全的解決辦法
方法一： 最簡單的設置橫向滾動條
方法二： 添加拖拽條改變外層容器寬度
方法三： 通過...表示 鼠標移上去顯示全稱
使用element ui的樹組件el-tree時，經(jīng)常出現(xiàn)如下問題：
el-tree渲染時因為文字內(nèi)容長度不一致，導致過長的文字無法顯示完全。
經(jīng)嘗試發(fā)現(xiàn)如下三種解決方法，推薦方法三。
方法一： 最簡單的設置橫向滾動條
效果：
[圖片上傳失敗...(image-324a3a-1680071247975)]
在當前樹節(jié)點的span標簽上設置樣式
overflow: auto;// 或者overflow-x: auto;
問題：
因為只有在最內(nèi)層span層設置overflow時，能有效控制超出部分的顯示，導致多個文字超長部分都有橫向滾動條出現(xiàn)，有點丑。即便是在上一層label層添加overflow一樣還是丑。所以問題等于沒解決。下一個
方法二： 添加拖拽條改變外層容器寬度
效果：
[圖片上傳失敗...(image-f38949-1680071247975)]
添加拖拽條
<div id="dragBar"></div>
在當前組件加載完后，給拖拽條綁定事件
mounted () { // 給縮放拖動條掛載相應方法 入?yún)?拖動條對象, 左側(cè)div的ID) this.bindResize(document.getElementById('dragBar'), 'menu') }, methods: { // 縮放條拖動進而改變左側(cè)div寬度方法 bindResize (bar, menu) { /* eslint-disable */ // 獲取左邊縮放的div對象 let els = document.getElementById(menu).style let x = 0 // 鼠標的 X 和 Y 軸坐標 jQuery(bar).mousedown(function (e) { // 按下元素后 計算當前鼠標與對象計算后的坐標 x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width() // 支持 setCapture時 捕捉焦點 // 設置事件 // 綁定事件 if (bar.setCapture) { bar.setCapture() bar.onmousemove = function (ev) { mouseMove(ev || event) } bar.onmouseup = mouseUp } else { jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp) } // 防止默認事件發(fā)生 e.preventDefault() }) // 移動事件 function mouseMove (e) { // 宇宙超級無敵運算中 els.width = e.clientX - x + 'px' } // 停止事件 function mouseUp () { // 支持 releaseCapture時 // 釋放焦點 // 移除事件 // 卸載事件 if (bar.releaseCapture) { bar.releaseCapture() bar.onmousemove = bar.onmouseup = null } else { jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp) } } /* eslint-enable */ } }
問題：
辦法是好辦法，就是有點麻煩，我只是想要簡單的顯示完全不想拖來拖去怎么辦？下一個
方法三： 通過…表示 鼠標移上去顯示全稱
效果：
[圖片上傳失敗...(image-d52492-1680071247974)]
代碼：
使用el-tree組件如下：
<el-tree :data="DeJudgeGist_list_treeData" :props="defaultProps" :indent="0" highlight-current default-expand-all > <span class="span-ellipsis" slot-scope="{ node, data }"> <span :title="node.label">{{ node.label }}</span> </span></el-tree>
給span標簽添加樣式，通過…表示文本未完全顯示：
.span-ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
補充說明：
如果.span-ellipsis樣式設置無效，可能需要加上display: block;即為：
.span-ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
因為我用element ui的el-tree組件，span的外層樣式默認為display: flex; 則無需設置span的display屬性即可。
