一、问题描述
<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>
二、解决办法
- 第一步: 给select加上
:popper-append-to-body="false"
- 第二步: 定位到当前需要设置的
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>
等是封装的组件,无须细看。看重点就行,这里只是记录一下遇到的问题。