https://blog.csdn.net/qq_34169240/article/details/100140534
轉(zhuǎn)自：https://blog.csdn.net/Beam007/article/details/84305216
element ui的el-tree文字顯示不全的解決辦法
方法一： 最簡(jiǎn)單的設(shè)置橫向滾動(dòng)條
方法二： 添加拖拽條改變外層容器寬度
方法三： 通過(guò)...表示 鼠標(biāo)移上去顯示全稱(chēng)
使用element ui的樹(shù)組件el-tree時(shí)拨拓，經(jīng)常出現(xiàn)如下問(wèn)題：
el-tree渲染時(shí)因?yàn)槲淖謨?nèi)容長(zhǎng)度不一致，導(dǎo)致過(guò)長(zhǎng)的文字無(wú)法顯示完全檀训。
經(jīng)嘗試發(fā)現(xiàn)如下三種解決方法，推薦方法三。
方法一： 最簡(jiǎn)單的設(shè)置橫向滾動(dòng)條
效果：
[圖片上傳失敗...(image-324a3a-1680071247975)]
在當(dāng)前樹(shù)節(jié)點(diǎn)的span標(biāo)簽上設(shè)置樣式
overflow: auto;// 或者overflow-x: auto;
問(wèn)題：
因?yàn)橹挥性谧顑?nèi)層span層設(shè)置overflow時(shí)妄田，能有效控制超出部分的顯示拄氯，導(dǎo)致多個(gè)文字超長(zhǎng)部分都有橫向滾動(dòng)條出現(xiàn)啄育，有點(diǎn)丑该窗。即便是在上一層label層添加overflow一樣還是丑弟蚀。所以問(wèn)題等于沒(méi)解決。下一個(gè)
方法二： 添加拖拽條改變外層容器寬度
效果：
[圖片上傳失敗...(image-f38949-1680071247975)]
添加拖拽條
<div id="dragBar"></div>
在當(dāng)前組件加載完后酗失，給拖拽條綁定事件
mounted () { // 給縮放拖動(dòng)條掛載相應(yīng)方法 入?yún)?拖動(dòng)條對(duì)象, 左側(cè)div的ID) this.bindResize(document.getElementById('dragBar'), 'menu') }, methods: { // 縮放條拖動(dòng)進(jìn)而改變左側(cè)div寬度方法 bindResize (bar, menu) { /* eslint-disable */ // 獲取左邊縮放的div對(duì)象 let els = document.getElementById(menu).style let x = 0 // 鼠標(biāo)的 X 和 Y 軸坐標(biāo) jQuery(bar).mousedown(function (e) { // 按下元素后 計(jì)算當(dāng)前鼠標(biāo)與對(duì)象計(jì)算后的坐標(biāo) x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width() // 支持 setCapture時(shí) 捕捉焦點(diǎn) // 設(shè)置事件 // 綁定事件 if (bar.setCapture) { bar.setCapture() bar.onmousemove = function (ev) { mouseMove(ev || event) } bar.onmouseup = mouseUp } else { jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp) } // 防止默認(rèn)事件發(fā)生 e.preventDefault() }) // 移動(dòng)事件 function mouseMove (e) { // 宇宙超級(jí)無(wú)敵運(yùn)算中 els.width = e.clientX - x + 'px' } // 停止事件 function mouseUp () { // 支持 releaseCapture時(shí) // 釋放焦點(diǎn) // 移除事件 // 卸載事件 if (bar.releaseCapture) { bar.releaseCapture() bar.onmousemove = bar.onmouseup = null } else { jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp) } } /* eslint-enable */ } }
問(wèn)題：
辦法是好辦法粗梭，就是有點(diǎn)麻煩，我只是想要簡(jiǎn)單的顯示完全不想拖來(lái)拖去怎么辦级零？下一個(gè)
方法三： 通過(guò)…表示 鼠標(biāo)移上去顯示全稱(chēng)
效果：
[圖片上傳失敗...(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標(biāo)簽添加樣式，通過(guò)…表示文本未完全顯示：
.span-ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
補(bǔ)充說(shuō)明：
如果.span-ellipsis樣式設(shè)置無(wú)效滞乙，可能需要加上display: block;即為：
.span-ellipsis { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
因?yàn)槲矣胑lement ui的el-tree組件奏纪，span的外層樣式默認(rèn)為display: flex; 則無(wú)需設(shè)置span的display屬性即可。
