element 表格scroll_element-ui 的 el-table 上使用无限滚动加载（与自带的 infinite-scroll 结合）...

[TOC]

简介

此指令依赖于 element-ui，使用前请熟悉：

element-ui 表格

element-ui 无限滚动指令

使用

安装

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

}