el-Select 选择器底部固定

最新推荐文章于 2024-09-13 15:26:49 发布

西小贝。

最新推荐文章于 2024-09-13 15:26:49 发布

阅读量2.1k

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_46535287/article/details/126121202

版权

本文介绍了如何使用Element UI的Select组件实现底部固定的效果，当点击后滚动条直接滚动到页面底部，并展示一个input输入框。通过HTML和JS代码示例展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：select 底部固定点击滚动条直接到底部展示input输入框

基本的引用element就不写了直接写重点

HTML

  <el-form-item label="名称：" prop="Name">
            <el-select
              ref="cascader" // 固定底部需要
              v-model="sizeForm.parentTypeName"
              class="select_mini"
              placeholder="名称"
              size="mini"
              @visible-change="v => visibleChange(v, 'cascader', addCategory)"
            >
              <el-option
                v-for="(item,index) in List"
                :key="item.Code + index"
                class="optionClass"
                :label="item.TypeName"
                :value="item.TypeCode"
              >
                <span class="check" />
                <span style="margin-left: 8px">{{ item.TypeName }}</span>
              </el-option>
              <div v-if="addCategoryValue" id="anchor">
                <el-input v-model="sizeForm.parentName" placeholder="请输入内容" 
                 size="mini" style="padding: 10px" />
                <div style="text-align: right; padding-right: 10px">
                  <el-button class="btn_close" @click="addClose">取消</el-button>
                  <el-button type="primary" class="btn_save" 
                  @click="addClickClose">确定</el-button>
                </div>
              </div>
            </el-select>
          </el-form-item>

Js

  visibleChange(visible, refName, onClick) {
      if (visible) {
        const ref = this.$refs[refName]
        let popper = ref.$refs.popper
        if (popper.$el) popper = popper.$el
        if (!Array.from(popper.children).some(v => v.className === 'el-cascader-menu__list')) {
          const el = document.createElement('ul')
          el.className = 'el-cascader-menu__list'
          el.style = 'border-top: solid 1px #E4E7ED; padding:0;color: #4f7bff;cursor: pointer;'
          el.innerHTML = `<li class="el-cascader-node" style="height:38px;line-height: 38px">
                          <span class="el-cascader-node__label">+新增大类</span>
                          </li>`
          popper.appendChild(el)
          el.onclick = () => {
            this.addCategoryValue = true
            setTimeout(() => {
              document.querySelector('#anchor').scrollIntoView(true)
            }, 100) // 因为我控制隐藏是用的v-if  所以第一次进来获取不到才加的延时
          }
        }
      }
    },

因为设计输入框是在select里面所以这样写要是输入框放在外面可能需要在js里继续写样式感兴趣的朋友可以尝试一下

到这里基本结束了有问题留言