element中dialog里放tree增加滚动条

最新推荐文章于 2024-07-05 17:20:00 发布

晒黑的小神仙

最新推荐文章于 2024-07-05 17:20:00 发布

阅读量528

点赞数 1

本文链接：https://blog.csdn.net/weixin_61273407/article/details/124352714

版权

JavaScript 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

Vue

20 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用Less预处理器来定制Element UI的对话框组件（el-dialog），包括设置宽度、滚动条样式等。通过添加特定样式，实现了对话框宽度为20%和自定义滚动条的视觉效果。同时，为el-tree的父级元素设定了固定高度，确保了内容区域的滚动功能。

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

样式层 less :

/deep/ .el-dialog {
  width: 20% !important;
  ::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    //滑块部分
    border-radius: 5px;
    background-color: #c1c1c1;
  }
  ::-webkit-scrollbar-track {
    //轨道部分
    box-shadow: #ffffff;
    background: #ffffff;
    border-radius: 5px;
  }
}
/deep/ .el-dialog__body {
  overflow: auto;
}

同时给 el-tree 的父级元素一个固定高度 :

<div v-else class="tree">
    <el-tree
    :data="simStoreNameIDTagClass"
    :props="defaultProps"
    accordion
    @check-change="handleNodeClick"
    class="el-tree"
    show-checkbox
    ref="treeList"
    check-strictly
    >
    </el-tree>
</div>

......

.tree {
    height: 360px !important;
    .el-tree {
    }
}