el-tree⽂字显⽰不全的解决办法
⽬录
⽅法⼀：最简单的设置横向滚动条
⽅法⼆（新）：添加拖拽条改变外层容器宽度
⽅法⼆（⽼）：添加拖拽条改变外层容器宽度
⽅法三：通过...表⽰⿏标移上去显⽰全称
使⽤element ui的树组件el-tree时，经常出现如下问题：
el-tree渲染时因为⽂字内容长度不⼀致，导致过长的⽂字⽆法显⽰完全。
经尝试发现如下三种解决⽅法，推荐⽅法三。
⽅法⼀：最简单的设置横向滚动条
效果：
在当前树节点的span标签上设置样式
overflow: auto;
// 或者
overflow-x: auto;
问题：
因为只有在最内层span层设置overflow时，能有效控制超出部分的显⽰，导致多个⽂字超长部分都有横向滚动条出现，有点丑。即便是在上⼀层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 {
jquery滚动条滚动到底部width: 3px;
height: 100%;
background: #01e4fd;
cursor: e-resize;
}
.drag-right {
padding-right: 0px;
width: calc(100% - 213px);
}
js 调⽤
mounted () {
// 给缩放拖动条挂载相应⽅法⼊参(拖动条ID，左侧ID，右侧ID，外层ID)
this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
},
js 全局变量
export default new Vuex.Store({
state: {
// 拖动滚动条改变内部div宽度
dragBar: false
},
mutations: {
},
actions: {
},
modules: {
}
})
js 公共⽅法
import store from '../index'
// 缩放条拖动进⽽改变左侧div宽度⽅法
bindResize (barID, leftID, rightID, docID) {
// 设置是否移动标识
let removeFlag = false
// 获取左边缩放的div对象
let bar = ElementById(barID)
let dragLeft = ElementById(leftID).style
let dragRight = ElementById(rightID).style
let doc = ElementById(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 - place('px', '')
// ⽀持 setCapture时捕捉焦点 // 设置事件 // 绑定事件
if (bar.setCapture) {
bar.setCapture()
mouseMove(ev || event)
}
} else {
// bar.addEventListener('mousemove', mouseMove, false)
// bar.addEventListener('mouseup', mouseUp, false)
}
// 防⽌默认事件发⽣
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 (leaseCapture) {
} else {
// veEventListener('mousemove', mouseMove, false)
// veEventListener('mouseup', mouseUp, false)
}
store.state.dragBar = true
}
}
⽅法⼆（⽼）：添加拖拽条改变外层容器宽度效果：
添加拖拽条
<div id="dragBar"></div>
在当前组件加载完后，给拖拽条绑定事件
mounted () {
// 给缩放拖动条挂载相应⽅法⼊参(拖动条对象, 左侧div的ID)
this.ElementById('dragBar'), 'menu')
},
methods: {
/
/ 缩放条拖动进⽽改变左侧div宽度⽅法
bindResize (bar, menu) {
/* eslint-disable */
// 获取左边缩放的div对象
let els = ElementById(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()
mouseMove(ev || event)
}
} else {
jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
}
// 防⽌默认事件发⽣
e.preventDefault()
})
/
/ 移动事件
function mouseMove (e) {
// 宇宙超级⽆敌运算中
els.width = e.clientX - x + 'px'
}
// 停⽌事件
function mouseUp () {
// ⽀持 releaseCapture时 // 释放焦点 // 移除事件 // 卸载事件
if (leaseCapture) {
} else {
jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp) }
}
/* eslint-enable */
}
}
问题：
办法是好办法，就是有点⿇烦，我只是想要简单的显⽰完全不想拖来拖去怎么办？下⼀个
⽅法三：通过...表⽰⿏标移上去显⽰全称
效果：
过程：
遇到问题⾸先想到的就是这个解决办法，⽆奈绕了很多弯路才⾛上正道。
因为element ui官⽅el-tree⽂档⾥没有给节点插⼊title标签的说明，于是我打开源码在其对应节点的span标签强制写上
title="node.name"之类的并没有任何⽤处。
直到看到⾃定义节点内容，虽然官⽅举例⽤来插⼊和删除节点，但是我可以把点击事件变成悬浮事件显⽰节点⽂本全内容啊。然后选⽤scoped slot插⼊的时候发现：
最后终于结束了这个问题。
代码：
使⽤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样式设置⽆效，可能需要加上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属性即可。
到此这篇关于el-tree⽂字显⽰不全的解决办法的⽂章就介绍到这了，更多相关el-tree⽂字显⽰不全内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论