基礎用法

<template>
 <ul class="infinite-list" v-infinite-scroll="load">
  <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
 </ul>
</template>

<script>
 export default {
  data () {
   return {
    count: 0
   }
  },methods: {
   load () {
    this.count += 2
   }
  }
 }
</script>

禁用載入

<template>
 <div class="infinite-list-wrapper">
  <ul
   class="list"
   v-infinite-scroll="load"
   infinite-scroll-disabled="disabled">
   <li v-for="i in count" class="list-item">{{ i }}</li>
  </ul>
  <p v-if="loading">載入中...</p>
  <p v-if="noMore">沒有更多了</p>
 </div>
</template>

<script>
 export default {
  data () {
   return {
    count: 10,loading: false
   }
  },computed: {
   noMore () {
    return this.count >= 20
   },disabled () {
    return this.loading || this.noMore
   }
  },methods: {
   load () {
    this.loading = true
    setTimeout(() => {
     this.count += 2
     this.loading = false
    },2000)
   }
  }
 }
</script>

Attributes

element-ui 的 el-table 上使用無限滾動載入（與自帶的 infinite-scroll 結合）

安裝

npm install --save el-table-infinite-scroll

全域性引入

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';

Vue.use(elTableInfiniteScroll);

區域性引入

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
 directives: {
  'el-table-infinite-scroll': elTableInfiniteScroll
 }
}
</script>

完整例項

<template>
 <el-table
  border
  height="400px"
  v-el-table-infinite-scroll="load"
  :data="tableData"
 >
  <el-table-column prop="date" label="日期" width="180"> </el-table-column>
  <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
  <el-table-column prop="address" label="地址"> </el-table-column>
 </el-table>
</template>

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';

const exampleData = new Array(10).fill({
 date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'
});

export default {
 directives: {
  'el-table-infinite-scroll': elTableInfiniteScroll
 },data() {
  return {
   tableData: exampleData
  };
 },methods: {
  load() {
   this.$message.success('載入下一頁');
   this.tableData = this.tableData.concat(exampleData);
  }
 }
};
</script>

<style scoped>
.el-table {
 width: 100%;
}
</style>

到此這篇關於Element InfiniteScroll無限滾動的具體使用方法的文章就介紹到這了,更多相關Element InfiniteScroll無限滾動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！