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() 中需要用到


  
    

title

{{v}}
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

你可能感兴趣的:(vue material md-table scroll event bind)