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;

}