vue 滾動加載數據

table數據多的時候打開頁面會加載一會才顯示數據，這樣體驗不好，所以要做滾動加載數據

<el-table :data="materielList" style="width: 100%" class="familyDataDetail" height="250">
                <el-table-column prop="eventId" label="事件ID">
                    <template scope="scope">
                        <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="對應事件">
                    <template scope="scope">
                        <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="負責人">
                    <template scope="scope">
                        <label>{{eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--':
                            eventMap[scope.row.eventId].personalInformation.name}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="birthday" label="物料名稱">
                    <template scope="scope">
                        <label>{{materirlName}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="idcardNo" label="狀態">
                    <template scope="scope">
                        <label>{{formatType(scope.row.type)}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="relationship" label="數量">
                    <template scope="scope">
                        <label>{{formatUseNum(scope.row.useNum)}}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="ethtic" label="使用時間">
                    <template scope="scope">
                        <label>{{changeTime(scope.row.createOn)}}</label>
                    </template>
                </el-table-column>
            </el-table>

下面是js部分　　　　

methods: {
  init (param) {
　　let id = param.param && param.param.id
　　if(id){
　　　　　　this.start = 0
          MaterialRecordService.query({param: {baseId: this.baseId, materialId: id},start: this.start,limit: 30}).then(rsp => {//初次請求數據，30條
            this.start += 30
            this.materielList = rsp.data
            MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {
	            this.eventMap = {}
	            rsp3.data.forEach(n => (this.eventMap[n.id] = n))
	            
	        })	  
          })
　　}
  },
  onScroll() {
      let inner = document.querySelector('.el-table__body-wrapper');
      if(inner.scrollHeight - inner.scrollTop <= inner.clientHeight){//為true時證明已經到底，可以請求接口
	    if(this.flag){//設一個滾動事件的開關，（在data里面聲明 flag: true）默認為true
	      	 this.flag = false	            
	         MaterialRecordService.query({param: {baseId: this.baseId, materialId: this.entity.id},start: this.start,limit:30}).then(rsp => {//每次加載30條
		      this.materielList = this.materielList.concat(rsp.data)
	              this.start += 30
	              this.flag = true
		      MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {
			   rsp3.data.forEach(n => (this.eventMap[n.id] = n))
		      })
	         })	            
	    }
      }
   }
},
mounted () {
      this.init({...this.param})
　　　　//監聽表格dom對象的滾動事件
      document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.onScroll);
    }

在這里我要說明一下監聽的dom對象是哪一個

我還要解釋下scrollHeight、scrollTop、clientHeight這三個屬性

這是我截的別人的圖加了幾筆

scrollHeight：網頁正文全文高度，

scrollTop：網頁滾動的高度，

clientHeight：網頁可視區域的高度