element ui el-table检测滚动条到底

Question

element ui el-table检测滚动条到底条到底?响应事件

Answer 1

element-ui 我暂时没有发现他支持这个功能, 只有分页器.
我是用的自定义指令来完成这个功能的, 下面给你贴上代码 你可以参考一下

// v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
Vue.directive('tabelLoadmore', {
    bind(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper');
      
      SELECTWRAP_DOM.addEventListener('scroll', function() {

          /*
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
            let sign = 80; // 定义默认的向上滚于乡下滚的边界
            const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) && 
                            this.scrollTop > sign)// 注意: && this.scrollTop
            
            if(this.scrollTop > sign) {
                sign = this.scrollTop;
                console.log('向下')
            }
            if(this.scrollTop < sign) {
                sign = this.scrollTop;
                console.log('向上')
            }
            
            if(CONDITION) {
                binding.value();
            }
      });
    }
})

<template>
    <el-table 
        :data="tableData" 
        empty-text=" " 
        v-tableLoadmore="tableLoadMore"
    </el-table>
</template>

<script>
    export default{
        methods: {
            tableLoadMore() {
                // 表格到底后执行  这里写你要做的事
            }
        }
    }
</script>

我现在是这样处理的 如果有更好的方式 可以的话 和我说一下

Answer 2

这个不是你要的答案
正好业务有相似的地方，需要实现el-table列表中添加商品，自动滑动显示 到刚添加的那一列，
感谢@Tony_BringWater的答案启发， 直接放代码：

   watch: {
      productList(v) {
        if (v.length) {
          this.$nextTick(() => {
            let container = this.$el.querySelector('.el-table__body-wrapper');
            container.scrollTop = container.scrollHeight;
          })
        }
      },