ElementUI table组件无限滚动加载
in 前端 with 0 comment

ElementUI table组件无限滚动加载

in 前端 with 0 comment

elementUI自带的InfiniteScrollTable组件中直接使用会触发无限load。似乎是监听了当前页面DOM的滚动来执行的load。

屏幕截图.png

经过一番搜索发现,有个名叫el-table-infinite-scroll的插件可以在table上实现无限滚动效果

安装命令

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

局部引用:

<template>
  <el-table
    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';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  methods: {
    load() {
      this.$message.success('加载下一页');
      this.tableData = this.tableData.concat(exampleData);
    }
  }
}
</script>

注:需要设置table的height才能使load生效

配置项

组件的配置项和InfiniteScroll完全一致

11.png

链接

github仓库:https://github.com/yujinpan/el-table-infinite-scroll

Comments are closed.