快捷導(dǎo)航

el-select 點(diǎn)擊按鈕滾動(dòng)到選擇框頂部的實(shí)現(xiàn)代碼

更新時(shí)間：2024年05月10日 09:43:20 作者：顧辰呀

本文通過(guò)實(shí)例代碼給大家分享el-select 點(diǎn)擊按鈕滾動(dòng)到選擇框頂部效果,主要代碼是在visibleChange在這個(gè)popper里面找到.el-select-dropdown__list,感興趣的朋友跟隨小編一起看看吧

主要代碼是在visibleChange 在這個(gè) 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>標(biāo)簽：</strong>
    <el-select
      v-model="name"
      size="medium"
      ref="select"
      clearable
      filterable
      multiple
      placeholder="請(qǐng)選擇"
      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('請(qǐng)選擇標(biāo)簽名稱(chēng)')
        //   reject(new Error('數(shù)據(jù)校驗(yàn)失敗，請(qǐng)檢查'))
        // }
        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>添加其他標(biāo)簽
                          </a>`
          popper.appendChild(el)
          el.onclick = () => {
            let dom = popper.querySelector('.el-select-dropdown__list')
            setTimeout(() => {
              dom.scrollIntoView()
            }, 800)
            // 初始情況 沒(méi)有數(shù)據(jù)
            if (this.selectList.length === 0) {
              return this.selectList.unshift({ name: '', name2: '', id: '', isHandle: true })
            }
            if (this.selectList[0].name === '') {
              this.$message.error('請(qǐng)回到選擇列表頂部，填寫(xiě)第一項(xiàng)內(nèi)容')
              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('此項(xiàng)不能進(jìn)行選中操作，請(qǐng)?zhí)顚?xiě)內(nèi)容后保存此項(xiàng)后重試！')
    }
  }
}
</script>
<style lang="scss" scoped>
.SetTags {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
}
</style>

到此這篇關(guān)于el-select 點(diǎn)擊按鈕滾動(dòng)到選擇框頂部的文章就介紹到這了,更多相關(guān)el-select內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: