有這么一個需求，使用 vue-material 的 md-table 組件的 Fixed headers 樣式效果顯示數(shù)據(jù)

默認表格顯示100條數(shù)據(jù)，如果滾動條滑動到最底部時，再加載100條數(shù)據(jù)，不停更新表格數(shù)據(jù)，直到把所有數(shù)據(jù)顯示完為止

實現(xiàn)需求需要監(jiān)聽 md-table 中的滾動條，判斷滾動到底觸發(fā)對應操作

一般都是直接監(jiān)聽整個頁面的滾動條，md-table 的滾動條監(jiān)聽需要做個小改動，監(jiān)聽事件才有效

example.vue

md-table 設置 ref 屬性，在 mounted() 中需要用到

<md-table v-model="tableData" md-card md-fixed-header ref="cardTable">
  <md-table-toolbar>
    <h1 class="md-title">title</h1>
  </md-table-toolbar>
  <md-table-row slot="md-table-row" slot-scope="{ item }">
    <md-table-cell v-for="(v, k) in item" :md-label="k" :key="k">
      {{v}}
    </md-table-cell>
  </md-table-row>
</md-table>

mounted () {
...

let cardTable = this.$refs.cardTable
// 獲取頁面中的滾動條所在的元素
let lastEle = cardTable.$el.lastElementChild 
// 滾動監(jiān)聽
lastEle.addEventListener('scroll', () => {
  // 判斷滾動條是否到底
  if (lastEle.scrollHeight - lastEle.scrollTop === lastEle.clientHeight) {
    // do something 
    console.log('我是有底線的.')
  }
}, false)

...  
}

只要找到 md-table 生成的滾動條所在的元素位置，給元素添加對應的滾動監(jiān)聽事件就OK了

scroll

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

scrollHeight

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

scrollTop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

clientHeight

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight