记一次vue+elementui树状图横向竖向滚动条

上图为效果图

<template>
  <div class="scrollClass">
    <el-scrollbar style="height:610px; width: 240px;">
      <el-tree
        class="filter-tree"
        :data="officeTreeData"
        :props="{
               value: 'id',             // ID字段名
               label: 'name',         // 显示名称
               children: 'childNodes'    // 子级字段名
              }"
        default-expand-all
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        @node-contextmenu="rightClick"
        ref="officeTree">
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          officeTreeData: []
        }
      },
      activated () {
        this.refreshTree()
      },
      methods: {
        refreshTree () {
          this.$http({
            url: `/siteInfo/data/siteTree`,
            method: 'get'
          }).then(({data}) => {
            this.officeTreeData = data.treeData
          })
        },
        filterNode (value, data) {
          if (!value) return true
          return data.name.indexOf(value) !== -1
        },
        handleNodeClick (data) {
          this.menuVisible = false
          this.office.id = data.id
          this.office.name = data.name
          this.selectOfficeName = '已选机构: ' + data.name
          if (data.type === '6') {
            this.officeType = true
          } else {
            this.officeType = false
          }
          // this.refreshList()
        },
        rightClick (MouseEvent, object, Node, element) {
          debugger
          this.$nextTick(() => {
            this.getType()
            this.getState(object.id)
          })
          this.office.id = object.id
          this.selectOfficeName = '已选机构: ' + object.name
          if (object.type === '2' || object.type === '1') {
            this.busVisible = true
            this.siteVisible = false
            this.officeType = false
          } else if (object.type === '6') {
            this.busVisible = false
            this.siteVisible = true
            this.officeType = true
          }
          this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
          this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
          var menu = document.querySelector('#menu')
          document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
          menu.style.display = 'block'
          menu.style.left = MouseEvent.clientX - 200 + 'px'
          menu.style.top = MouseEvent.clientY - 140 + 'px'
        }
      }
    }
</script>

<style >
/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

/*此处是为了添加横向滚动条*/
  .el-tree>.el-tree-node{
    /*min-width: 100%;*/
    width: 120%;
    display:inline-block;
  }
</style>

这样，我想要的效果就实现了，既可以竖向滚动，也可以横向滚动。