vue 实现el-select下拉框吸顶效果
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
效果如图:

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>
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)