Element的select，自定义内容时，超出option高度的内容被隐藏 ，重写样式也未达到想要的效果（element ui select 自定义内容超出被

一、问题描述

    <el-form-item label="默认值：" prop="category">
            <el-select
              v-model="FormInAddPopup.category"
              placeholder="请选择"
            >
              <el-option label="" value="">
                <span style=" float: left;">清空</span>
                <span style="float: right;color: #8492a6;font-size: 13px;"
                  >关闭</span
                >
              </el-option>
              <el-option
                :label="popupTreeItem.label"
                :value="popupTreeItem.id"
                class="category_style"
              >
                <comn-tree
                  :treeList="treeInPopup"
                  @handleNodeClick="popupNodeClick"
                ></comn-tree>
              </el-option>
            </el-select>
          </el-form-item>

二、解决办法

1. 第一步： 给select加上 :popper-append-to-body="false"
2. 第二步： 定位到当前需要设置的 option 元素，给该 option 元素设一个类名，设置其高度 （或重写其高度）

 <el-form-item label="默认值：" prop="category">
		<el-select
              v-model="FormInAddPopup.category"
              placeholder="请选择"
              :popper-append-to-body="false"  //*** 这是第一步
            >
              <el-option label="" value="">
                <span style=" float: left;">清空</span>
                <span style="float: right;color: #8492a6;font-size: 13px;"
                  >关闭</span
                >
              </el-option>
              <el-option
                :label="popupTreeItem.label"
                :value="popupTreeItem.id"
                class="category_style"  // *** 这是第二步
              >
                <comn-tree
                  :treeList="treeInPopup"
                  @handleNodeClick="popupNodeClick"
                ></comn-tree>
              </el-option>
               </el-select>
          </el-form-item>  
              
//*** css样式： 

.category_style {
    height: 100px; // 设置高度，覆盖组件中原option的高度
    overflow: auto; // 内容超出，显示滚动条
  }

据官网描述： Select 组件的 popper-append-to-body 属性默认为true,可能会引起一些定位问题，设置它可解决我遇到的这个问题 小tip： 不要纠结代码内容，比如，上面的代码也是有一个form包起来的，也没有js部分，<comn-tree>等是封装的组件，无须细看。看重点就行，这里只是记录一下遇到的问题。