element表格的添加滚动加载事件

Category : 前端 Views : 3356 Comments : 0 Posted on : 2019-06-05

<template>
  <el-table :data="tableData" ref="table" height="300" style="width: 100%">
    <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>
export default {
  methods: {
    getMoreLog() {
      this.dom.scrollTop = this.dom.scrollTop - 100;
    }
  },
  mounted() {
    // 获取需要绑定的table
    this.dom = this.$refs.table.bodyWrapper;
    this.dom.addEventListener("scroll", () => {
      // 滚动距离
      let scrollTop = this.dom.scrollTop;
      console.log(scrollTop);
      // 变量windowHeight是可视区的高度
      let windowHeight = this.dom.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = this.dom.scrollHeight;
      if (scrollTop + windowHeight === scrollHeight) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
        if (!this.allData) {
          this.getMoreLog();
          console.log(
            "scrollTop",
            scrollTop + "windowHeight",
            windowHeight + "scrollHeight",
            scrollHeight
          );
        }
      }
    });
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        
      ]
    };
  }
};
</script>

或者用自定义指令的方式
在vue顶部(data层)定义指令，或者在main.js里定义全局指令，这里是局部使用
//定义loadmore指令

directives: {
        loadmore: {
            // 指令的定义
            bind(el, binding) {
                const selectWrap = el.querySelector(".el-table__body-wrapper");
                selectWrap.addEventListener("scroll", function() {
                    let sign = 0;
                    const scrollDistance =
                        this.scrollHeight - this.scrollTop - this.clientHeight;
                    if (scrollDistance <= sign) {
                        binding.value();
                    }
                });
            }
        }
    },

然后在标签上写上v-loadmore="loadmore"，loadmore方法就是滚动到底部触发的方法

loadMore() {
            if (this.pages > this.Updata.pageNum && this.tabFlag == true) {
                this.tabFlag = false;
                this.Updata.pageNum++;
                taskDetailList(this.Updata).then(res => {
                    this.tabFlag = true;
                    this.tableData = this.tableData.concat(res.data.list);
                    this.pages = res.data.pages;
                });
            }
        },

Posted by : lyhq Tags : 本文未设置标签

所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！

Previous post 已到最后一篇

Next post vue-axios基本用法

element表格的添加滚动加载事件

添加新评论