在vue中使用iview让在modal中的表格上拉加载更多-PC

最近有一个需求,表格不使用分页展示了,要求下拉加载更多的数据,让其一页展示(使用的是iview)
说明一点,并不是使用的Scroll无限滚动因为会在外面再加一个滚动条,与需求不服
1.获取元素
关于获取元素这一点真的是个巨坑
总所周知获取元素的方法有两种document.getElementById系列与document.querySelector系列
这两个获取元素的返回值是不一样的

上图很清除的看见两者返回的数据差别因为一个返回的是静态的vnode一个是动态的,所以一定要用document.getElementById来获取数据
到这里可能会要问了,啊,我代码给的id是不是我需要获取的元素啊,怎么样获取下级元素呢这很正常,因为我们用的是别人的组件,有层级没关系

找到他的子集元素,然后在赋值

let table = document.getElementById('scrollTable');
this.diascroll = table.children[0].children[1]

这时候,已经能去到你想取得滚动条得值
2.监听
获取到了scrollTop,clientHeight,scrollHeight,我们当然要监听他们来判断滚动条是否触底
我们把获取元素得滚动条和监听放在一个方法里面,这里我们使用得是addEventListener来监听

    showTable