下拉加载更多

src/main.js

@@ -20,6 +20,7 @@ import ElementUI from 'element-ui'
 import Contextmenu from 'vue-contextmenujs'
 // import 'element-ui/lib/theme-chalk/index.css'
 import preventReClick from '@/utils/preventReClick'
+import loadmore from '@/utils/loadMore'
 
 Vue.use(VueCookie)
 Vue.use(SuperFlow)
@@ -28,6 +29,7 @@ Vue.use(Print)
 Vue.use(ElementUI)
 Vue.use(Contextmenu)
 Vue.use(preventReClick) // 防止重复提交
+Vue.use(loadmore) // 防止重复提交
 Vue.config.productionTip = false
 
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock

src/utils/loadMore.js

@@ -0,0 +1,18 @@
+// directives.js
+import Vue from 'vue'
+
+const loadmore = Vue.directive('loadmore', {
+  bind (el, binding) {
+    const scrollWrap = el.querySelector('.el-select-dropdown__wrap')
+    scrollWrap.addEventListener('scroll', function () {
+      // 解决浏览器缩放导致的 scrollTop 小数问题
+      const isBottom =
+        this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight + 1
+      if (isBottom && this.scrollTop !== 0) {
+        binding.value() // 触发加载函数
+      }
+    })
+  }
+})
+
+export default { loadmore }

src/views/modules/home/workboard.vue

@@ -60,6 +60,7 @@
           <el-form-item label="选择用户" prop="">
             <el-select
               v-model="selectedUsers"
+               v-loadmore="loadMore"
               placeholder="请选择"
               multiple
               style="width: 100%"
@@ -91,7 +92,11 @@ export default {
       userOptions: [],
       oldSelectedUsers: [],
       selectedUsers: [],
-      list: []
+      list: [],
+      current: 1,
+      size: 50,
+      total: 0,
+      loading: false   // 防止重复请求
     }
   },
   created () {
@@ -103,12 +108,20 @@ export default {
       this.getSelectedUsers()
 
       this.chooseUserVisible = true
+      this.getUsers()
+    },
+
+    async getUsers () {
       this.$http({
         url: this.$http.adornUrl(`/user-service/user/queryWithSelectedItems`),
         method: 'get',
-        data: { current: 1, size: 50 }
+        params: this.$http.adornParams({
+          'current': this.current,
+          'size': this.size
+        })
       }).then(({ data }) => {
         if (data && data.code === '200') {
+          this.total = data.data.pageUsers.total
           let users = data.data.pageUsers.records
           if (users != null && users.length > 0) {
             users.map((t) => {
@@ -118,6 +131,15 @@ export default {
         }
       })
     },
+    // 滚动到底部时触发
+    async loadMore () {
+      if (this.loading || this.userOptions.length >= this.total) return
+
+      this.loading = true
+      this.current++
+      await this.getUsers()  // 请求下一页数据
+      this.loading = false
+    },
     // 提交用户
     userSubmit () {
       // let addUserIds = []