vue elementUI 自定义框组织树，选择select下拉组织树横行滑动条出现方法

背���：最近公司开发需要使用到组织树进行组织结构的选择，在开发途中遇到两个次组织树已超过外框，但超出部分不显示横向滑动条。

自定义组织树框代码如下：

                                                                                                                    选择        组织                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {{ data.name }}                                            {{ data.name }}                                                                                                                                                                                                                  :render-content="renderFunc"-->                                                                                           

css代码如下

// 创建围栏时填写的信息/* 设置穿梭框的 宽高 */.add-main-box {    width: 218px;    height: 350px;    margin-left: 10%;    border: 1px solid #D8DFE9;}.add-head {    width: 100%;    height: 40px;    border-bottom: 1px solid #EBEEF5;    line-height: 40px;    padding: 0px 20px;    background: linear-gradient(0deg, #BFC4CD, rgba(237,240,245,0));}.add-body {    width: 100%;    height: 308px;    overflow: auto;}.dataForm-position::v-deep .el-form-item__error {  margin-left: 5%;}// 自定义组织树框中的搜索框.personnel-transfer ::v-deep .el-input__inner{    border-radius: 20px !important; }.personnel-transfer ::v-deep .el-transfer-panel{    width : 218px;    height: 350px;    margin-left: 4.5%;    border: 1px solid #D8DFE9;    //搜索框圆圈    .el-input__inner{        border-radius: 20px !important;    } } .personnel-transfer ::v-deep .el-transfer-panel__list {    height: 340px !important;    }.personnel-transfer ::v-deep .el-transfer__buttons {    width: 50px;    margin-left: -27px;    .el-button + .el-button {    margin-left: 0px;    width: 65px;    background: #C7000B !important;    border-color:  #C7000B !important;    color: #FFFFFF !important;    } } .personnel-transfer ::v-deep .el-input__prefix{    margin-left: 75%;    margin-top: 2%; }// 穿梭框全部选择框背景颜色.personnel-transfer ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {    background-color: #BA292E;    border-color: #BA292E;  }//   穿梭框鼠标移动到文字的背景颜色.personnel-transfer ::v-deep .el-transfer-panel__item:hover {    color: #BA292E;  }//   穿梭框已选择后文字和选择框背景颜色.personnel-transfer ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {    color: #BA292E;  }.personnel-transfer ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {    background-color: #BA292E;    border-color: #BA292E;  }  //穿梭框头部背景颜色.personnel-transfer ::v-deep .el-transfer-panel .el-transfer-panel__header {    background: linear-gradient(0deg, #BFC4CD, rgba(237,240,245,0));}// 自定义人员树整体样式::v-deep.personnel-transfer{    // 人员树背景演示（elementUI）    .el-tree {      background: #FFFFFF;    }    //el-tree组件中class名为el-tree-node的p是块级元素，需要把它变为inline-block才出现滚动条，同时注意每一个节点占一行    .el-tree>.el-tree-node {      display: inline-block;      min-width: 100%;    }     // 选择框改成灰色    //  .el-checkbox__inner {    //   background-color: #edf2fc;    // }    // 人员树高度    .el-tree-node__content {      height: 31px;    }    // 人员树内容鼠标悬浮颜色    .el-tree-node__content:hover{      background-color: #FFEFED !important;      width: 100% !important;    }    // 人员树内容鼠标点击背景颜色    .el-tree-node:focus > .el-tree-node__content {            background-color: #FFEFED  !important;    }    // 箭头颜色更改    .el-tree-node__expand-icon {     color:#A4AEBB;     font-size: 19*0.87px;    }    //人员树字体大小    .el-tree-node__label {      font-size: 19*0.87px;  }  //穿梭框标题头部字体大小  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {    font-size: 19*0.87px;}}

第一种情况是在添加了下面类属性才显示横行滑动块

 .el-tree>.el-tree-node {

      display: inline-block;

      min-width: 100%;

    }

结果图如下：

第二种是选择下拉框内配置组织树，但宽度超了却不出现横向滑动条，详细请看下篇文章。