关于element ui滚动条使用

 element ui 自带的滚动条使用

在容器的直接外层添加 （需要展现滚动条的那一级）

<el-scrollbar style="height:100%"></el-scrollbar>

如果

注意添加样式  height:100%

 

另外添加全局的样式

body .el-scrollbar__wrap {
    overflow-x: hidden;
}

 

 

实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <div id="app">
  <div style="height:400px;">
    <el-scrollbar style="height:100%">
        <div style="width:700px;height:700px;border:solid;" >
          ....... blabla.....
        </div>
    </el-scrollbar>
  </div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

 

 如果是elementui的树 tree，不显示滚动条，解决如下（studyoct页面） 2022-4-15

<template>
  <div>
    <div style="height:200px;width:200px;border:1px solid #ddd">
      <el-scrollbar>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>
<style lang="scss">
  .el-scrollbar__wrap{
      overflow-x: hidden !important;
    }
</style>

如果横向的滚动条不显示，可以加上

.el-tree>.el-tree-node{
    min-width:100%;
    display: inline-block;
}

完美解决

 截图：

 

 

 

 

posted @ 2019-10-20 16:48  人在路途  阅读(33114)  评论(2)  编辑  收藏  举报