vue項目之自定義組件實現PC端下拉加載

一、需求

滑動 el-table 滾動條，實現 thead 不動，下拉 tbody 到底部時，el-table加載數據。
具體UI請看另一篇文章的需求 

PC端下拉加載

二、經過

同事正好有一個寫好的下拉加載的組件，就用了

自定義組件 DivScrollPagination.vue

<template>
  <div>
    <div v-if="loading==0" class="load-more">正在加載...</div>
   <!-- <div v-if="currentPage==pageCount" class="load-more">沒有更多數據</div>-->
  </div>
</template>

<script>
export default {
  props: {
    pageCount:Number,//頁數
      divId:String
  },
  mounted(){
      // 註冊scroll事件並監聽
      let _this = this;
      let div = document.getElementById(this.divId);
      div.addEventListener('scroll',function(){
          // 判斷是否滾動到底部
          if(_this.hasMore() && _this.getScrollTop() + _this.getHeight() > (_this.getScrollHeight()-20) && _this.loading==1 && _this.isStop==0) {
              // 如果開關打開則加載數據
              if(_this.hasMore()){//還有數據
                  _this.currentPage++;
                  _this.loading=0;
                  _this.$emit('current-change',_this.currentPage);
              }
          }
      });
  },
    watch: {
        pageCount:function () {

        }
    },
  data: function () {
        return {
           currentPage:1,
           isStop:0,
           loading:1,
        }
  },
  methods: {
      stopLoad(){
        this.isStop=1;
      },
      startLoad(){
        this.isStop=0;
      },
      hasMore(){
        return this.currentPage<(this.pageCount-1);
      },
      loadFinish(){
          this.loading=1;
      },
      resetPagination(){
          this.currentPage=0;
          document.getElementById(this.divId).scrollTop = 0;
      },
      getScrollTop(){
        let div = document.getElementById(this.divId);
        return div.scrollTop;
      },
      getScrollHeight(){
        let div = document.getElementById(this.divId);
        return div.scrollHeight;
      },
      getHeight(){
          let div = document.getElementById(this.divId);
          return div.clientHeight;
      }

  }
}
</script>
<style scoped lang="scss">
  .load-more{
    text-align: center;
    color:#666;
    margin-top:20px;
  }
</style>

項目中使用：

import DivScrollPagination from "../../components/DivScrollPagination";
export default {
  name: "index",
  components: {
    'div-scroll-pagination': DivScrollPagination,
  },
  data() {
	return {
	  // DivScrollPagination
      pageCount: 100,
      divScrollPage: 0,
      divScrollPagesize: 3,
      divScrollData: [
        {id: "01", name: "用戶01"},
        {id: "02", name: "用戶02"},
        {id: "03", name: "用戶03"},
        {id: "011", name: "用戶011"},
        {id: "022", name: "用戶022"},
        {id: "033", name: "用戶033"},
        {id: "0111", name: "用戶0111"},
        {id: "0222", name: "用戶0222"},
        {id: "0333", name: "用戶0333"},
      ],
      datas: [
        {id: "1", name: "用戶1"},
        {id: "2", name: "用戶2"},
        {id: "3", name: "用戶3"},
        {id: "4", name: "用戶4"},
        {id: "5", name: "用戶5"},
        {id: "6", name: "用戶6"},
        {id: "7", name: "用戶7"},
        {id: "8", name: "用戶8"},
        {id: "9", name: "用戶9"},
        {id: "10", name: "用戶10"},
        {id: "11", name: "用戶11"},
        {id: "12", name: "用戶12"},
        {id: "13", name: "用戶13"},
        {id: "14", name: "用戶14"},
        {id: "15", name: "用戶15"},
        {id: "16", name: "用戶16"},
        {id: "17", name: "用戶17"},
        {id: "18", name: "用戶18"},
        {id: "19", name: "用戶19"},
        {id: "20", name: "用戶20"},
        {id: "21", name: "用戶21"},
        {id: "22", name: "用戶22"},
        {id: "23", name: "用戶23"},
        {id: "24", name: "用戶24"},
        {id: "25", name: "用戶25"},
        {id: "26", name: "用戶26"},
        {id: "27", name: "用戶27"}
      ],
	}
  },
  methods: {
    // DivScrollPagination
    currentChange(currentPage) {
      console.log(currentPage, this.$refs, 'currentPage????')
      this.$refs.divScroll.loadFinish();
      let startIndex = (currentPage - 1) * this.divScrollPagesize;
      let endIndex = startIndex + this.divScrollPagesize;
      console.log(this.divScrollData, 'this.megenTableDate...1111')
      this.divScrollData.push(...this.datas.slice(startIndex, endIndex));
      console.log(this.divScrollData, 'this.megenTableDate...2222')
    },
  }

效果：

三、實際使用

code都差不多，這裏就直接貼圖了

DOM：

VUE：
關於 el-table 相關的數據和上面的demo也差不多，用到實際上要和後臺接口聯調，就不一一展示了。
這裏主要時候一下，怎麼在自己項目裏面給自定義組件綁定el-table的滾動條。

	首先，自定義組件 mounted 綁定事件里加一個判斷。
因爲 el-table 是通過點擊按鈕後，動態生成的，不能在 mounted 裏面綁定，
只能在 methods方法裏面寫一個方法，父組件調用子組件的方法，來綁定 scroll 事件。

新增一個bindScroll方法後，相關方法也要跟着做校驗。

渲染 el-table 後，調用自定義組件綁定方法

dialog.pageCount是從接口裏面獲取的 // 數據總共多少頁

currentChangeToDialog方法：