Bug Type: Component

Environment

• Vue Version: 3.2.47
• Element Plus Version: 2.3.4
• Browser / OS: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
• Build Tool: Vite

Reproduction

Related Component

• el-scrollbar

Reproduction Link

Element Plus Playground

Steps to reproduce

<template>
  <ArticleCard :title="title">
     <el-scrollbar> <!-- bug:影响load方法触发 -->
    <ul
      v-infinite-scroll="load"
      :infinite-scroll-immediate="false"
      class="infinite-list"
      :infinite-scroll-disabled="disabled"
    >
      <li>
      </li>
      <li v-if="loading" class="infinite-list-otherItem">Loading..</li>
      <li v-if="noMore" class="infinite-list-otherItem">No more</li>
    </ul>
    <</el-scrollbar>
  </ArticleCard>
</template>

<script lang="ts" setup>
import moment from "moment";
import { fetchArticles } from "@/service";

type ArticleInfo = {
  articleInfoList: Array<any>;
  total: number;
};

defineProps<{ title: string }>();

const router = useRouter();

const pageSize = ref(4);
const currentPage = ref(1);
const loading = ref(false);
const articleInfo = reactive<ArticleInfo>({
  articleInfoList: [],
  total: 0,
});

const load = () => {
  console.log(111);
  loading.value = true;
  init();
};

const formatDate = (time: string) => {
  return moment(time).format("YYYY-MM-DD HH:mm:ss");
};

const init = async () => {
  const { data } = await fetchArticles({
    pageSize: pageSize.value,
    currentPage: currentPage.value,
  });

  loading.value = false;
  if (data && data.list.length > 0) {
    // 避免返回空数据
    // console.log("data", data); // 获取首页展示的文章信息
    articleInfo.total = data?.total ?? 0;
    articleInfo.articleInfoList = articleInfo.articleInfoList.concat(
      data?.list ?? []
    );
    currentPage.value += 1;
  }
};

const handleClick = (id: string) => {
  router.push({ path: "/detail", query: { id: id } });
};

const noMore = computed(() => {
  return currentPage.value * pageSize.value > articleInfo.total;
});
const disabled = computed(() => {
  return loading.value || noMore.value;
});

init();

</script>

What is Expected?

load get triggered

What is actually happening?

trigger once because of the init()

Additional comments

(empty)