效果如图:
1.popper-append-to-body设置为false 同级添加class名
<el-select v-model="handleTemp.game_id" placeholder="请选择" class="select_style" :popper-append-to-body="false">
<div slot="empty" class="select_input">
<el-button
size="mini"
type="text"
icon="el-icon-finished"
class="buttonSty"
@click="selectAll('game_id')"
>全选</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-close"
class="buttonSty13"
@click="clearSelectAll('game_id')"
>清空</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-sort"
class="buttonSty13"
@click="reverCheck('game_id')"
>反选</el-button
>
<div class="ml-10 mr-10 mb-5">
<el-input
ref="searchDom3"
v-model="dropDownValueGame"
@input="dropDownSearch('game_id')"
style="width: 100%"
size="mini"
placeholder="请搜索"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<div
style="font-size: 12px; color: #606266"
class="pl-10 pr-20 mt-10 mb-10"
>
暂无匹配数据...
</div>
</div>
</div>
</el-select>
属性说明:
样式参考
<style scoped lang="scss">
.select_style {
::v-deep {
.el-select-dropdown__list {
padding: 0;
}
.select_input {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: #fff;
}
}
}
</style>