vue element-ui的select下拉加載更多

  • select下拉加載更多組件 select-scroll.vue
<el-select v-model="selected" filterable multiple :filter-method="search" @visible-change="searchPositionScroll" popper-class="select-scroll">
    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"/>
</el-select>
</template>

<script>
// 使用列子   <select-scroll v-model="params.positonName" :options="posList" @search="searchPosition" @scrollSearch="searchPositionScroll" multiple/>
// // 獲取posList列表
// getPositionList(e, append = false) {
//     if (!this.params.authDeptPath) {
//         this.posList = []
//         this.params.positonName = []
//         return
//     }
//     this.positionParams.positionName = e
//     clearTimeout(this.timer)
//     this.timer = setTimeout(() => {
//         if (append) {
//             this.positionParams.currentPage++
//         }
//         positionInfoList(this.positionParams).then(res => {
//             this.posList = this.posList.concat(res.data.records.map(v => {
//                 v.id = v.positionId
//                 v.label = v.positionName
//                 v.value = v.positionName
//                 return v
//             }))
//         })
//     }, 500)
// },
// // select搜索查詢
// searchPosition(e) {
//     this.posList = []
//     this.positionParams.currentPage = 1
//     this.getPositionList(e)
// },
// // select滾動到底加載
// searchPositionScroll(e) {
//     this.getPositionList(e, true)
// },

import loadingGif from '@/assets/images/loading.gif'

export default {
    name: 'select-scroll',
    props: {
        value: { type: Array, require: true },
        options: { type: Array, require: true }
    },
    data() {
        return {
            selected: [],
            query: ''
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(newV) {
                this.value = newV
            }
        },
        selected(newV) {
            this.$emit('input', newV)
        },
        options() {
            const loadingGif = document.querySelector('.select-scroll .loadingGif')
            if (loadingGif) {
                loadingGif.parentElement.removeChild(loadingGif)
            }
        }
    },
    methods: {
      search(e) {
        this.query = e
        this.$emit('search', e)
      },
      // 滾動到底加載
      searchPositionScroll(e) {
        if (e) {
          const select_dom = document.querySelector('.select-scroll.el-select-dropdown .el-select-dropdown__wrap')
          select_dom.addEventListener('scroll', (event) => {
              const dom = event.target
              if (dom.scrollHeight == dom.scrollTop + dom.clientHeight) {
                console.log(dom.scrollHeight, dom.scrollTop, dom.clientHeight, '滾動到底了')
                // 加個loading轉圈圈
                if (!dom.querySelector('.loadingGif')) {
                    const img = new Image()
                    img.src = loadingGif
                    const div = document.createElement('div')
                    div.style = 'text-align:center'
                    div.className = 'loadingGif'
                    div.appendChild(img)
                    dom.querySelector('.el-select-dropdown__list').appendChild(div)
                }
                this.$emit('scrollSearch', this.query)
              }
          })
        }
      }
    }

}
</script>

<style>

</style>```

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章