亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Element-UI的?InfiniteScroll?無(wú)限滾動(dòng)組件基本使用及應(yīng)用場(chǎng)景

 更新時(shí)間：2023年06月29日 08:31:11   作者：遠(yuǎn)方除了遙遠(yuǎn)一無(wú)所有  
這篇文章主要介紹了Element-UI的InfiniteScroll無(wú)限滾動(dòng)組件基本使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

應(yīng)用場(chǎng)景

有的時(shí)候我們表格不想要使用分頁(yè)的功能，想滑動(dòng)到底部加載更多的數(shù)據(jù)；有時(shí)后端返回的數(shù)據(jù)很多要前端在一頁(yè)展示，但是使用了element-ui的table組件后會(huì)發(fā)生頁(yè)面卡頓的情況（因?yàn)閑lement-ui的table組件將所有的dom元素都渲染在頁(yè)面上了）

代碼

<template>
  <div class="app">
    <ul
      class="infinite-list"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="50"
      style="overflow: auto"
    >
      <li v-for="(i, index) in count" :key="index" class="infinite-list-item">
        {{ i }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 20,
    };
  },
  methods: {
    // 加載更多時(shí)追加數(shù)據(jù)
    loadMore() {
      console.log("load");
      this.count += 2;
    },
  },
  computed: {
    // 控制是否能加載更多
    disabled() {
      return this.count >= 30;
    },
  },
};
</script>
<style scoped>
.infinite-list {
  height: 200px;
  background-color: skyblue;
}
</style>

到此這篇關(guān)于Element-UI的 InfiniteScroll 無(wú)限滾動(dòng)組件基本使用的文章就介紹到這了,更多相關(guān)Element-UI的 InfiniteScroll 無(wú)限滾動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論