无限滚动重置服务器,Element InfiniteScroll无限滚动的具体使用方法

基础用法

• {{ i }}

export default {

data () {

return {

count: 0

}

},

methods: {

load () {

this.count += 2

}

}

}

禁用加载

class="list"

v-infinite-scroll="load"

infinite-scroll-disabled="disabled">

{{ i }}

加载中...

没有更多了

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)

}

}

}

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);

局部引入

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

export default {

directives: {

'el-table-infinite-scroll': elTableInfiniteScroll

}

}

完整实例

border

height="400px"

v-el-table-infinite-scroll="load"

:data="tableData"

>

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);

}

}

};

.el-table {

width: 100%;

}

到此这篇关于Element InfiniteScroll无限滚动的具体使用方法的文章就介绍到这了,更多相关Element InfiniteScroll无限滚动内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站！