vue3+element-plus 通过v-infinite实现下拉滚动无限加载

v-infinite官网

v-infinite-scroll无限滚动组件使用详解

1. 1、v-infinite-scroll="load" //load无限滚动加载的方法
2. 2、infinite-scroll-disabled //是否禁用无限滚动加载
3. 3、infinite-scroll-delay //节流时延，单位为ms
4. 4、infinite-scroll-distance //触发加载的距离阈值，单位为px
5. 5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。
6. //默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

 官网给到的基础案例：

1. <template>
2. <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
3. <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}li>
4. ul>
5. template>
7. <script lang="ts" setup>
8. import { ref } from 'vue'
9. const count = ref(0)
10. const load = () => {
11. count.value += 2
12. }
13. script>
15. <style>
16. .infinite-list {
17. height: 300px;
18. padding: 0;
19. margin: 0;
20. list-style: none;
21. }
22. .infinite-list .infinite-list-item {
23. display: flex;
24. align-items: center;
25. justify-content: center;
26. height: 50px;
27. background: var(--el-color-primary-light-9);
28. margin: 10px;
29. color: var(--el-color-primary);
30. }
31. .infinite-list .infinite-list-item + .list-item {
32. margin-top: 10px;
33. }
34. style>

自己写了一个简单的demo：

2. <div>
3. <el-select v-model="value" style="margin-right: 20px" v-if="isMounted">
4. <div v-infinite-scroll="load" infinite-scroll-immediate="false" style="overflow: hidden">div>
5. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
6. el-select>
7. div>
11. <script setup>
12. const value = ref('')
13. let options = reactive([{
14. value: "aaa",
15. label: "atext"
16. },
17. {
18. value: "bbb",
19. label: "atext"
20. }, {
21. value: "cccc",
22. label: "atext"
23. }, {
24. value: "cccc",
25. label: "atext"
26. }, {
27. value: "cccc",
28. label: "atext"
29. }, {
30. value: "cccc",
31. label: "atext"
32. }, {
33. value: "cccc",
34. label: "atext"
35. }, {
36. value: "cccc",
37. label: "atext"
38. }, {
39. value: "cccc",
40. label: "atext"
41. }, {
42. value: "cccc",
43. label: "atext"
44. }, {
45. value: "ddd",
46. label: "dtext"
47. }, {
48. value: "yyyy",
49. label: "dtext"
50. }
51. ])
52. const load = () => {
53. options.push({
54. value: "xxxx",
55. label: "xtext"
56. })
57. }
58. const isMounted = ref(false);
59. onMounted(() => {
60. isMounted.value = true;
61. });
62. script>

当使用v-infinite时，控制台会报错：

 原因：

官方上的Issues解释是需要nextTick()之后再去显示
解决方法是组件挂载完成再去显示el-select组件

所以在上面demo中select组件加了v-if，并且在onMounted中将其再显示出来。

报错解决问题是掘金上的一位大哥的方法，原文地https://juejin.cn/post/7095925947412512804

 上面el-select组件的下拉加载，看完可能会有两个疑问，一个是为什么el-option不写在v-infinite-scroll标签内部，二是为什么v-infinite-scroll 所在的标签的overflow属性不是和官网一样的atuo，二是hidden，因为在此案例中放到内部或不放在内部效果一样的，最核心的是如果此案例中，并没有给v-infinite-scroll所在的标签设置高度，理应是下拉加载会失效，但是如果是hidden的话，并且此时高度为0，那么只要鼠标滚轮滑动，那么就会触发下拉加载，

总结下拉就是，此案例效果是打开下拉框，只要滑动滚轮就触发下拉加载，二官网那种标准案例，是滚轮滑动到底部才会触发下拉加载。

如果是官网那种标准做法需要注意：使用v-infinite-scroll的元素设置overflow: hidden以及固定高度