vue material md-table scroll event bind

有这么一个需求，使用 vue-material 的 md-table 组件的 Fixed headers 样式效果显示数据

默认表格显示100条数据，如果滚动条滑动到最底部时，再加载100条数据，不停更新表格数据，直到把所有数据显示完为止

实现需求需要监听 md-table 中的滚动条，判断滚动到底触发对应操作

一般都是直接监听整个页面的滚动条，md-table 的滚动条监听需要做个小改动，监听事件才有效

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 
// 滚动监听
lastEle.addEventListener('scroll', () => {
  // 判断滚动条是否到底
  if (lastEle.scrollHeight - lastEle.scrollTop === lastEle.clientHeight) {
    // do something 
    console.log('我是有底线的.')
  }
}, false)

...  
}

只要找到 md-table 生成的滚动条所在的元素位置，给元素添加对应的滚动监听事件就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