element el-tree超出宽度出现滚动条

最新推荐文章于 2024-08-15 17:48:43 发布

_七七_

最新推荐文章于 2024-08-15 17:48:43 发布

阅读量1.6k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51052779/article/details/125422208

版权

vue 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

这篇博客主要介绍了如何使用CSS自定义一个El-Tree组件，使其节点展示为横向滚动的效果。通过设置`min-width`、`display`和`float`属性，实现了节点的横向布局，并利用`::v-deep`深度选择器调整内部样式，以达到预期的滚动条功能。

摘要由CSDN通过智能技术生成

<style lang="scss" scoped>
.el-tree {
  background: none !important;
  box-sizing: content-box;
  overflow: auto;
  margin-right: 10px;
}
::v-deep {
  .el-tree-node {
    /*设置横向滚动条*/
    min-width: 100% !important;
    display: block !important;
    float: left;
  }
}
</style>