el-select 点击按钮滚动到选择框顶部的实现代码

   let popper = ref.$refs.popper
   const ref = this.$refs.select 
   let dom = popper.queryselector('.el-select-dropdown__list')
            settimeout(() => {
              dom.scrollintoview()
            }, 800)

<template>
  <div class="settags">
    <strong>标签：</strong>
    <el-select
      v-model="name"
      size="medium"
      ref="select"
      clearable
      filterable
      multiple
      placeholder="请选择"
      style="width: 370px"
      @visible-change="visiblechange"
      @change="selectchange"
    >
      <el-option :label="item.name" :value="item.id" v-for="(item, index) in selectlist" :key="index">
        <!-- :disabled="!item.id" -->
        <div style="float: left">
          <span v-if="!item.ishandle">{{ item.name }}</span>
          <span v-else @click.stop.prevent="() => {}">
            <el-input style="width: 120px" size="mini" maxlength="15" clearable v-model.lazy="item.name2"></el-input>
          </span>
        </div>
        <div style="float: right; margin-right: 20px">
          <span
            style="margin: 0 5px; font-size: 14px; color: #409eff"
            v-if="!item.ishandle"
            @click.stop="iseditbtn(item, true)"
            >编辑</span
          >
          <span
            style="margin: 0 5px; font-size: 14px; color: #409eff"
            v-if="item.ishandle"
            @click.stop="iseditbtn(item, false)"
            >保存</span
          >
          <span
            style="margin: 0 5px; font-size: 14px; color: #409eff"
            v-if="item.ishandle"
            @click.stop="cancelbtn(item)"
            >取消</span
          >
        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  components: {},
  data () {
    return {
      name: [],
      selectlist: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    async getselectlist () {
      const res = await request({
        url: '/op/tmsorder/label/dropdown',
        method: 'get'
      })
      res.data.foreach((item) => {
        item.name2 = json.parse(json.stringify(item.name))
        item.ishandle = false
      })
      this.selectlist = res.data
    },
    handlesubmit () {
      return new promise((resolve, reject) => {
        // if (this.name.length === 0) {
        //   this.$message.error('请选择标签名称')
        //   reject(new error('数据校验失败，请检查'))
        // }
        resolve(this.name)
      })
    },
    handlereset () {
      this.name = []
    },
    // true 编辑  false 保存
    async iseditbtn (item, bol) {
      let apiurl = '/op/tmsorder/save/label'
      if (bol) {
        item.ishandle = true
      } else {
        // 新增
        if (!item.id) {
          await request({
            url: apiurl,
            method: 'post',
            data: {
              name: item.name2
            }
          })
          this.$message.success('新增成功')
          this.getselectlist()
        } else {
          // 修改
          await request({
            url: apiurl,
            method: 'post',
            data: {
              name: item.name2,
              id: item.id
            }
          })
        }
        this.$message.success('保存成功')
        this.getselectlist()
      }
    },
    cancelbtn (item) {
      if (!item.name2 && !item.id) return this.selectlist.splice(0, 1)
      item.name2 = item.name
      item.ishandle = false
    },
    visiblechange (visible) {
      // 下拉框显示隐藏
      if (visible) {
        const ref = this.$refs.select
        console.log('ref:', ref)
        let popper = ref.$refs.popper
        console.log('popper:', popper)
        if (popper.$el) popper = popper.$el
        // 判断是否有添加按钮
        if (!array.from(popper.children).some((v) => v.classname === 'btn-box')) {
          const el = document.createelement('div')
          el.classname = 'btn-box'
          el.innerhtml = `<a class="btn" style="font-size:14px;display:block;line-height:38px;text-align:center;">
                            <i class="el-icon-plus"></i>添加其他标签
                          </a>`
          popper.appendchild(el)
          el.onclick = () => {
            let dom = popper.queryselector('.el-select-dropdown__list')
            settimeout(() => {
              dom.scrollintoview()
            }, 800)
            // 初始情况 没有数据
            if (this.selectlist.length === 0) {
              return this.selectlist.unshift({ name: '', name2: '', id: '', ishandle: true })
            }
            if (this.selectlist[0].name === '') {
              this.$message.error('请回到选择列表顶部，填写第一项内容')
              return
            }
            this.selectlist.unshift({ name: '', name2: '', id: '', ishandle: true })
          }
        }
      } else {
        if (this.selectlist.length > 0 && !this.selectlist[0].id) {
          this.selectlist.shift()
        }
      }
      this.selectlist.foreach((item) => {
        item.ishandle = false
      })
    },
    selectchange (e) {
      let bol = e.some((item) => item == '' || item == null || item == undefined)
      this.name = this.name.filter((item) => item !== '')
      if (bol) return this.$message.error('此项不能进行选中操作，请填写内容后保存此项后重试！')
    }
  }
}
</script>
<style lang="scss" scoped>
.settags {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
</style>