el-select 点击按钮滚动到选择框顶部

主要代码是在visibleChange 在这个 popper 里面找到 .el-select-dropdown__list

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>