element ui 日常使用需求

element ui 整合无限下拉框结合table表格。

在线示例：https://yujinpan.github.io/el-table-infinite-scroll/

实现原理：https://github.com/yujinpan/el-table-infinite-scroll/blob/master/src/directives/table-infinite-scroll.js

简介

此指令依赖于 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);

局部引入

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