el-tree文字顯示不全的解決辦法
更新時間：2021年08月11日 08:32:21 作者：Beam
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用element ui的樹組件el-tree時，經(jīng)常出現(xiàn)如下問題：
el-tree渲染時因為文字內(nèi)容長度不一致，導(dǎo)致過長的文字無法顯示完全。
經(jīng)嘗試發(fā)現(xiàn)如下三種解決方法，推薦方法三。
方法一： 最簡單的設(shè)置橫向滾動條
效果：
在當前樹節(jié)點的span標簽上設(shè)置樣式
overflow: auto; // 或者 overflow-x: auto;
問題：
因為只有在最內(nèi)層span層設(shè)置overflow時，能有效控制超出部分的顯示，導(dǎo)致多個文字超長部分都有橫向滾動條出現(xiàn)，有點丑。即便是在上一層label層添加overflow一樣還是丑。所以問題等于沒解決。下一個
方法二（新）： 添加拖拽條改變外層容器寬度
效果：
代碼：
html 注意四個部分的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 () {
// 給縮放拖動條掛載相應(yīng)方法 入?yún)?拖動條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: {
// 拖動滾動條改變內(nèi)部div寬度
dragBar: false
},
mutations: {
},
actions: {
},
modules: {
}
})
js 公共方法
import store from '../index'
// 縮放條拖動進而改變左側(cè)div寬度方法
bindResize (barID, leftID, rightID, docID) {
// 設(shè)置是否移動標識
let removeFlag = false
// 獲取左邊縮放的div對象
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 // 鼠標的 X 和 Y 軸坐標
// 掛載鼠標事件
bar.addEventListener('mousedown', moveDownMouse, false)
// 注意移動和鼠標失焦事件需要綁定在dom上，若只是綁定在bar上只能在bar上移動\失焦才有效
doc.addEventListener('mousemove', mouseMove, false)
doc.addEventListener('mouseup', mouseUp, false)
function moveDownMouse (e) {
removeFlag = true
// 按下元素后 計算當前鼠標與對象計算后的坐標
x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
// 支持 setCapture時 捕捉焦點 // 設(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)
}
// 防止默認事件發(fā)生
e.preventDefault()
store.state.dragBar = false
}
// 移動事件
function mouseMove (e) {
if (removeFlag) {
// 宇宙超級無敵運算中
let width = e.clientX - x
if (width < 200) {
dragLeft.width = '200px'
} else if (width > 400) {
dragLeft.width = '400px'
} else {
dragLeft.width = width + 'px'
}
// 若不計算右邊寬度，拖動條會被擠壓
dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
}
}
// 停止事件
function mouseUp () {
removeFlag = false
// 支持 releaseCapture時 // 釋放焦點 // 移除事件 // 卸載事件
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>
在當前組件加載完后，給拖拽條綁定事件
mounted () {
// 給縮放拖動條掛載相應(yīng)方法 入?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時 捕捉焦點 // 設(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)
}
// 防止默認事件發(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 */
}
}
問題：
辦法是好辦法，就是有點麻煩，我只是想要簡單的顯示完全不想拖來拖去怎么辦？下一個
方法三： 通過...表示 鼠標移上去顯示全稱
效果：
過程：
遇到問題首先想到的就是這個解決辦法，無奈繞了很多彎路才走上正道。
因為element ui官方el-tree文檔里沒有給節(jié)點插入title標簽的說明，于是我打開源碼在其對應(yīng)節(jié)點的span標簽強制寫上title="node.name"之類的并沒有任何用處。
直到看到自定義節(jié)點內(nèi)容，雖然官方舉例用來插入和刪除節(jié)點，但是我可以把點擊事件變成懸浮事件顯示節(jié)點文本全內(nèi)容啊。
然后選用scoped slot插入的時候發(fā)現(xiàn)：
最后終于結(jié)束了這個問題。
代碼：
使用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標簽添加樣式，通過...表示文本未完全顯示：
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
補充說明：
如果.span-ellipsis樣式設(shè)置無效，可能需要加上display: block;即為：
.span-ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
因為我用element ui的el-tree組件，span的外層樣式默認為display: flex; 則無需設(shè)置span的display屬性即可。
到此這篇關(guān)于el-tree文字顯示不全的解決辦法的文章就介紹到這了,更多相關(guān)el-tree文字顯示不全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇主要介紹了vue-cli 接口代理配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了Vue組件中的自定義事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue-drawer-layout實現(xiàn)手勢滑出菜單欄
這篇文章主要為大家詳細介紹了vue-drawer-layout實現(xiàn)手勢滑出菜單欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue命令式組件的編寫與應(yīng)用小結(jié),在這篇文章中,我會帶你了解命令式組件的基本概念,并通過一些簡單的示例來展示它們是如何工作的,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了詳解Vue用自定義指令完成一個下拉菜單（select組件），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue3中的任何一個組合式api都可以單獨抽離出去在另一個文件，最后只需要回歸到setup()中即可，這篇文章主要介紹了vue3的抽離封裝方法,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue3源碼分析調(diào)度器與watch用法原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
在Vue3中,我們經(jīng)常會遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10