主要代码是在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>

到此这篇关于el-select 点击按钮滚动到选择框顶部的文章就介绍到这了,更多相关el-select内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部