效果如图:

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>

GitHub 加速计划 / vu / vue
108
18
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐