Element’S select, when customizable, content beyond the height of option is hidden, and overrides do not have the desired effect

I. Problem description

    <el-form-item label="Default value:" prop="category">
            <el-select
              v-model="FormInAddPopup.category"
              placeholder="Please select"
            >
              <el-option label="" value="">
                <span style=" float: left;">empty</span>
                <span style="float: right; color: #8492a6; font-size: 13px;"
                  >Closed < / 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>
Copy the code

Second, solutions

1. Popper-append-to-body =”false”
2. Step 2: Locate the option element that you want to set, give it a class name, and set its height (or override its height)

 <el-form-item label="Default value:" prop="category">
		<el-select
              v-model="FormInAddPopup.category"
              placeholder="Please select"
              :popper-append-to-body="false"/*** this is the first step >
              <el-option label="" value="">
                <span style=" float: left;">empty</span>
                <span style="float: right; color: #8492a6; font-size: 13px;"
                  >Closed < / span ></el-option>
              <el-option
                :label="popupTreeItem.label"
                :value="popupTreeItem.id"
                class="category_style"// *** this is the second step >
                <comn-tree
                  :treeList="treeInPopup"
                  @handleNodeClick="popupNodeClick"
                ></comn-tree>
              </el-option>
               </el-select>
          </el-form-item>  
              
//*** CSS style:

.category_style {
    height: 100px; // Set the height to override the original option height of the component
    overflow: auto; // Display the scroll bar when the content exceeds
  }
Copy the code

According to the official website: SelectThe component’spopper-append-to-bodyProperty defaults to true, which can cause some positioning problems, and setting it solves the problem I encountered Small tip:Don’t worry about the content of the code, for example, the above code is also wrapped in a form, and there is no JS part,<comn-tree>Etc are packaged components that do not need to be examined. Just focus on what’s important. This is just a record of the problems.