el-Select 选择器 底部固定

需求：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里继续写样式 感兴趣的朋友可以尝试一下

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