在vue项目中使用elementUI组件的树组件，当树节点的数据过多则需要增加纵向滚动条，如果节点的内容过长则需要设置横向滚动条，那么css中应该怎样实现呢？下面就是一个树节点内容溢出增加横纵向滚动条的实例

1、HTML中

<template>
	<el-tree
	  :data="data"
	  show-checkbox
	  node-key="id"
	  :default-expanded-keys="[2, 3]"
	  :default-checked-keys="[5]">
	</el-tree>
</template>

2、script中

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: '一级 2',
          children: [{
            id: 3,
            label: '二级 2-1',
            children: [{
              id: 4,
              label: '三级 3-1-1'
            }, {
              id: 5,
              label: '三级 3-1-2',
              disabled: true
            }]
          }, {
            id: 2,
            label: '二级 2-2',
            disabled: true,
            children: [{
              id: 6,
              label: '三级 3-2-1'
            }, {
              id: 7,
              label: '三级 3-2-2',
              disabled: true
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

3、css中

<style scoped lang="less">
  .video-tree{
    width: 100px;
    height: 200px;
    padding:10px 0;
    box-sizing: border-box;
    
    /*设置纵向滚动条、横向滚动条要配合下面的.el-tree-node的样式才能实现*/
    overflow: scroll;
  
  
    >.el-tree{
      >.el-tree-node{
        /*设置横向滚动条*/
        min-width: 100%;
        display: inline-block;
      
      
        /*设置根节点隐藏*/
        >.el-tree-node__content{
          display: none;
        }
      }
    }
  }
</style>