el-tree文字顯示不全的解決辦法
更新時(shí)間：2021年08月11日 08:32:21 作者：Beam
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
使用element ui的樹組件el-tree時(shí)，經(jīng)常出現(xiàn)如下問題：
el-tree渲染時(shí)因?yàn)槲淖謨?nèi)容長度不一致，導(dǎo)致過長的文字無法顯示完全。
經(jīng)嘗試發(fā)現(xiàn)如下三種解決方法，推薦方法三。
方法一： 最簡單的設(shè)置橫向滾動(dòng)條
效果：
在當(dāng)前樹節(jié)點(diǎn)的span標(biāo)簽上設(shè)置樣式
overflow: auto; // 或者 overflow-x: auto;
問題：
因?yàn)橹挥性谧顑?nèi)層span層設(shè)置overflow時(shí)，能有效控制超出部分的顯示，導(dǎo)致多個(gè)文字超長部分都有橫向滾動(dòng)條出現(xiàn)，有點(diǎn)丑。即便是在上一層label層添加overflow一樣還是丑。所以問題等于沒解決。下一個(gè)
方法二（新）： 添加拖拽條改變外層容器寬度
效果：
代碼：
html 注意四個(gè)部分的id綁定即可
<el-container id="dept">
<el-aside width="220px" id="drag-dept-left">
</el-aside>
<div id="dragBar-dept" class="dragBar"></div>
<el-main id="drag-dept-right" class="drag-right">
</el-main>
</el-container>
css 僅供參考自行修改寬度控制
.dragBar {
width: 3px;
height: 100%;
background: #01e4fd;
cursor: e-resize;
}
.drag-right {
padding-right: 0px;
width: calc(100% - 213px);
}
js 調(diào)用
mounted () {
// 給縮放拖動(dòng)條掛載相應(yīng)方法 入?yún)?拖動(dòng)條ID，左側(cè)ID，右側(cè)ID，外層ID)
this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
},
js 全局變量
export default new Vuex.Store({
state: {
// 拖動(dòng)滾動(dòng)條改變內(nèi)部div寬度
dragBar: false
},
mutations: {
},
actions: {
},
modules: {
}
})
js 公共方法
import store from '../index'
// 縮放條拖動(dòng)進(jìn)而改變左側(cè)div寬度方法
bindResize (barID, leftID, rightID, docID) {
// 設(shè)置是否移動(dòng)標(biāo)識(shí)
let removeFlag = false
// 獲取左邊縮放的div對(duì)象
let bar = document.getElementById(barID)
let dragLeft = document.getElementById(leftID).style
let dragRight = document.getElementById(rightID).style
let doc = document.getElementById(docID)
let x = 0 // 鼠標(biāo)的 X 和 Y 軸坐標(biāo)
// 掛載鼠標(biāo)事件
bar.addEventListener('mousedown', moveDownMouse, false)
// 注意移動(dòng)和鼠標(biāo)失焦事件需要綁定在dom上，若只是綁定在bar上只能在bar上移動(dòng)\失焦才有效
doc.addEventListener('mousemove', mouseMove, false)
doc.addEventListener('mouseup', mouseUp, false)
function moveDownMouse (e) {
removeFlag = true
// 按下元素后 計(jì)算當(dāng)前鼠標(biāo)與對(duì)象計(jì)算后的坐標(biāo)
x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
// 支持 setCapture時(shí) 捕捉焦點(diǎn) // 設(shè)置事件 // 綁定事件
if (bar.setCapture) {
bar.setCapture()
bar.onmousemove = function (ev) {
mouseMove(ev || event)
}
bar.onmouseup = mouseUp
} else {
// bar.addEventListener('mousemove', mouseMove, false)
// bar.addEventListener('mouseup', mouseUp, false)
}
// 防止默認(rèn)事件發(fā)生
e.preventDefault()
store.state.dragBar = false
}
// 移動(dòng)事件
function mouseMove (e) {
if (removeFlag) {
// 宇宙超級(jí)無敵運(yùn)算中
let width = e.clientX - x
if (width < 200) {
dragLeft.width = '200px'
} else if (width > 400) {
dragLeft.width = '400px'
} else {
dragLeft.width = width + 'px'
}
// 若不計(jì)算右邊寬度，拖動(dòng)條會(huì)被擠壓
dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
}
}
// 停止事件
function mouseUp () {
removeFlag = false
// 支持 releaseCapture時(shí) // 釋放焦點(diǎn) // 移除事件 // 卸載事件
if (bar.releaseCapture) {
bar.releaseCapture()
bar.onmousemove = bar.onmouseup = null
} else {
// bar.removeEventListener('mousemove', mouseMove, false)
// bar.removeEventListener('mouseup', mouseUp, false)
}
store.state.dragBar = true
}
}
方法二（老）： 添加拖拽條改變外層容器寬度
效果：
添加拖拽條
<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í)無敵運(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 */
}
}
問題：
辦法是好辦法，就是有點(diǎn)麻煩，我只是想要簡單的顯示完全不想拖來拖去怎么辦？下一個(gè)
方法三： 通過...表示 鼠標(biāo)移上去顯示全稱
效果：
過程：
遇到問題首先想到的就是這個(gè)解決辦法，無奈繞了很多彎路才走上正道。
因?yàn)閑lement ui官方el-tree文檔里沒有給節(jié)點(diǎn)插入title標(biāo)簽的說明，于是我打開源碼在其對(duì)應(yīng)節(jié)點(diǎn)的span標(biāo)簽強(qiáng)制寫上title="node.name"之類的并沒有任何用處。
直到看到自定義節(jié)點(diǎn)內(nèi)容，雖然官方舉例用來插入和刪除節(jié)點(diǎn)，但是我可以把點(diǎn)擊事件變成懸浮事件顯示節(jié)點(diǎn)文本全內(nèi)容啊。
然后選用scoped slot插入的時(shí)候發(fā)現(xiàn)：
最后終于結(jié)束了這個(gè)問題。
代碼：
使用el-tree組件如下：
<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true" :node-key="nodeId">
<span class="span-ellipsis" slot-scope="{ node, data }">
<span :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
給span標(biāo)簽添加樣式，通過...表示文本未完全顯示：
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
補(bǔ)充說明：
如果.span-ellipsis樣式設(shè)置無效，可能需要加上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; 則無需設(shè)置span的display屬性即可。
到此這篇關(guān)于el-tree文字顯示不全的解決辦法的文章就介紹到這了,更多相關(guān)el-tree文字顯示不全內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
文章介紹了如何在Vue項(xiàng)目中使用jsPlumb庫來生成流程圖,文章提供了兩個(gè)簡單的示例代碼,展示了如何定義流程圖的數(shù)據(jù)字段和如何配置連線樣式,最后,文章鼓勵(lì)讀者繼續(xù)探索更多關(guān)于vue和jsPlumb的使用技巧,感興趣的朋友一起看看吧2025-02-02
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04
下面小編就為大家?guī)硪黄赩ue過渡狀態(tài)實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue 中v-model的完整用法及v-model的實(shí)現(xiàn)原理解析
這篇文章詳細(xì)介紹了Vue.js中的v-model指令的使用,包括基本用法、原理、結(jié)合不同類型的表單元素（如radio、checkbox、select）以及使用修飾符（如lazy、number、trim）等,感興趣的朋友一起看看吧2025-02-02
vue3(optionApi)使用Element Plus庫沒有效果的解決方式
這篇文章主要介紹了vue3(optionApi)使用Element Plus庫沒有效果的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue webpack多頁面構(gòu)建的實(shí)例代碼
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證
這篇文章主要介紹了vue 實(shí)現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗(yàn)證，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3中jsoneditor的使用相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解下2024-01-01