elementui tree 层级过多时,高亮状态无法选满整行

问题:

如上图所示,官方的tree组件,在层级很多时 elementui -tree 的高亮状态并没有选中整行。

(衍生库 vue-easy-tree 也会出现此问题)

原因:

(没有查看源码,只是根据dom简单定位了一下,实际可能并不是这个原因)

添加高亮状态的 div 并没有随着子级的展开而适应宽度,所有的tree-node 的宽度在初始化的时候就固定了。

解决方式:

复制代码
.el-tree-node{
    width: fit-content;
    min-width: var(--treeWidth);
  }

通过fit-content 可以将宽度随着内容撑开,而min-width 会保证没有那么多层级时也可以左右排布。

(treeWidth 表示的是整个tree 容器的宽度,要是需要留有间隙,可以减去 10 或者 20 像素)

加了以后则可以全行高亮了

缺点:

min-width 在某些条件下会显得多余,例如:

此时只需要tree根据弹窗自动铺满就好了,不用考虑min-width。

当然这个解决起来也不复杂,通过js计算一下父容器的宽度就好了

复制代码
mounted () {
    this.treeWidth = this.$refs['easy-tree']?.$el.offsetWidth - 15
},

第二天的ps:

好像不用js计算,min-width: 100% 就可以搞定了~

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui