element的隐藏组件滚动条el-scrollbar使用

elementui中有个隐藏的组件，就是element官网使用的滚动条，tree 左右滑动滚动条

 

①首先全局引入element，import ElementUI from 'element-ui';

import ElementUI from 'element-ui'

Vue.use(ElementUI)

②页面代码如下

<template>
  <div class="box">
    <el-scrollbar class="tree_scroll">
      <el-tree
        :data="data"
        show-checkbox
        class="tree_app"
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      ></el-tree>
    </el-scrollbar>
  </div>
</template>

③

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                { id: 9, label: "三级 1-1-1adf答复哈的身份" },
                { id: 10, label: "三级 1-1-2" },
                { id: 11, label: "三级 1-1-3" }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [{ id: 5, label: "二级 2-1" }, { id: 6, label: "二级 2-2" }]
        },
        {
          id: 3,
          label: "一级 3",
          children: [{ id: 7, label: "二级 3-1" }, { id: 9, label: "二级 3-2" }]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  }
};
</script>

④样式

.box {
  width: 200px;
  height: 200px;
  background: red;
  white-space: nowrap;
  margin: 200px;
}
.tree_app {
  height: 200px;
}
.el-tree-node>.el-tree-node__children{
  overflow:visible !important;
}

::-webkit-scrollbar {

width: 10px;

height: 10px;

}

::-webkit-scrollbar-thumb {

background-color: #000000;

border-radius: 3px;

}