elementui el-tree组件flex布局出现横向滚动条

Posted 2021-09-13 666888

flex布局el-tree能出现纵向滚动条，不能正常出现横向滚动条

<div style="width: 100%; height: 100%; display:flex; flex-direction: column;">
    <i-input placeholder="输入关键字查询" v-model="filterText">
      <i slot="suffix" class="el-input__icon el-icon-search"></i>
    </i-input>
    <div style="flex:1; margin-top: 10px; overflow:auto; white-space: nowrap;">
        <el-tree
          class="filter-tree"
          :props="defaultProps"
          :show-checkbox="showCheckBox"
          :default-expand-all="defExpand === 0"
          node-key="treeId"
          :expand-on-click-node="false"
          :filter-node-method="_filterNode"
          :check-strictly="checkWay !== 1"
          @node-click="_handleNodeClick"
          @check="_nodeCheck"
          :data="treeData"
          ref="tree">
        </el-tree>
    </div>
  </div>

解决方法：

/deep/.el-tree{
  display:inline-block;
  min-width:100%;
}