ant design vue 多个Tabs 标签页 下使用 table组件滚动加载的坑 【第一个tab页可以滚动加载而切换第2 个tab不能触发】

<template>
  <div class="session-group">
    <a-tabs v-model="activeKey"  @change="callback">
      <a-tab-pane key="1" tab="会话">
        <a-table
          ref="session"
          id="session"
          :row-key="(record) => record.id"
          :columns="sessionColumns"
          :data-source="sessionData"
          :pagination="false"
          style="overflow-y: auto; height: 340px; padding-right: 3px"
          :loading="isLoading"
        >
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="群组" force-render>
        <a-table
          ref="group"
          id="group"
          :row-key="(record) => record.id"
          :columns="sessionColumns"
          :data-source="groupData"
          :pagination="false"
          :loading="isLoading"
          style="overflow-y: auto; height: 340px; padding-right: 3px"
        >
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { getAction } from ‘@api/manage‘
export default {
  data() {
    return {
      activeKey: ‘1‘,
      timer: null,
      sessionFirstTime: 0, //session tab触底次数
      groupFirstTime: 0, //group  tab触底次数
      isLoading: false,
      sessionPageNo: 1,
      groupPageNo: 1,
      scrollHeight: 0,
      tableHeader: ‘table-header‘,
      sessionColumns: [
        {
          title: ‘会话ID‘,
          dataIndex: ‘id‘,
          key: ‘id‘,
          scopedSlots: { customRender: ‘id‘ },

          align: ‘center‘,
        },
        {
          title: ‘机器ID‘,
          dataIndex: ‘robotUserId‘,
          key: ‘robotUserId‘,
          rowClassName: ‘table-header‘,
          align: ‘center‘,
        },
        {
          title: ‘所属平台‘,
          dataIndex: ‘resourceType_dictText‘,
          key: ‘resourceType_dictText‘,
          ellipsis: true,
          rowClassName: ‘table-header‘,
          align: ‘center‘,
        },
        {
          title: ‘会话状态‘,
          dataIndex: ‘activeStatus_dictText‘,
          key: ‘activeStatus_dictText‘,
          rowClassName: ‘table-header‘,
          align: ‘center‘,
          customRender: (text, row, index) => {
            if (text == ‘活跃‘) {
              return <span style="color:#2DBD6D">{text}</span>
            } else {
              return <span style="color:#F17E03">{text}</span>
            }
          },
        },
      ],
      sessionData: [],
      groupData: [],
      url: {
        session: ‘/robot/robotChat/getActiveSessionPlanelist‘,
        group: ‘robot/robotChat/getActiveGroupSessionPlanelist‘,
      },
    }
  },
  mounted() {
    this.handleScroll()
    this.initSessionData()
    this.initGroupData()
    this.callback(‘1‘)
    this.timer = setInterval(() => {
      this.sessionPageNo = 1
      this.groupPageNo = 1
      this.sessionFirstTime = 0
      this.groupFirstTime = 0
      this.initSessionData()
      this.initGroupData()
    }, 30000)
  },
  methods: {
    tabClick(key){
      this.activeKey = key
    },
    handleScroll() {
      document.getElementById(‘session‘).addEventListener(‘scroll‘, this.sessionFunction)
    },
    sessionFunction() {
      var dd = document.querySelector(‘#session‘).scrollTop
      var ss = document.querySelector(‘#session‘).scrollHeight
      let hh = document.querySelector(‘#session‘).clientHeight
      if (ss - dd - hh <= 0) {
        this.sessionFirstTime++
          this.loadMoreSession(this.sessionPageNo)
      }
    },
    groupFunction() {
      var dd = document.querySelector(‘#group‘).scrollTop
      var ss = document.querySelector(‘#group‘).scrollHeight
      let hh = document.querySelector(‘#group‘).clientHeight
      if (ss - dd - hh == 0) {
        this.groupFirstTime++
          this.loadMoreGroup(this.groupPageNo)
      }
    },


    callback(key) {
      if (key == 2) {
        this.$nextTick(function () {
          document.getElementById(‘group‘).addEventListener(‘scroll‘, this.groupFunction)
        })
      }
      this.activeKey = key
      this.$emit(‘currentKey‘, key)
    },

    initSessionData() {
      this.isLoading = true
      var params = {}
      getAction(this.url.session, params)
        .then((res) => {
          // debugger
          if (res.success) {
            this.sessionData = res.result.records
            if (res.result.records.length > 0) {
              this.sessionPageNo++
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
      this.isLoading = false
    },
    initGroupData() {
      this.isLoading = true
      let obj = { isGroup: 1 }
      getAction(this.url.group, obj)
        .then((res) => {
          if (res.success) {
            this.groupData = res.result.records
            if (res.result.records.length > 0) {
              this.groupPageNo++
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
      this.isLoading = false
    },

    /*
     *滚动加载更多--会话
     */
    loadMoreSession(pageNo) {
      var params = {
        pageNo,
      }
      getAction(this.url.session, params)
        .then((res) => {
          if (res.success) {
            if (res.result.records.length > 0) {
              this.sessionData = [...this.sessionData, ...res.result.records]
              this.sessionPageNo++
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
      this.isLoading = false
    },

    /*
     *滚动加载更多--群组
     */
    loadMoreGroup(pageNo) {
      this.isLoading = true
      let obj = { isGroup: 1, pageNo }
      getAction(this.url.group, obj)
        .then((res) => {
          if (res.success) {
            if(res.result.records.length>0){
              this.groupData = [...this.groupData, ...res.result.records]
              this.groupPageNo++
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
      this.isLoading = false
    },
  },
  destroyed() {
    document.getElementById(‘session‘).removeEventListener(‘scroll‘, this.sessionFunction)
    document.getElementById(‘group‘).removeEventListener(‘scroll‘, this.groupFunction)
    clearInterval(this.timer)
    this.timer = null
  },
}
</script>
<style lang="less" scoped>
.session-group {
  height: 100%;

  /deep/ .ant-table-thead {
    background: linear-gradient(90deg, #d1dffc 0%, #e8effd 100%);
  }
  /deep/ .ant-table-thead > tr > th {
    background: transparent !important;
  }
  /*隐藏表格的表头的滚动条*/
  /deep/ .ant-table-hide-scrollbar {
    overflow-y: hidden;
    overflow: hidden !important;
    margin-bottom: 0;
    padding-right: 0;
  }
  /deep/ .ant-tabs-tab {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #606266;
  }
  /deep/ .ant-tabs-tab-active {
    color: #3e7efc;
  }
  /deep/ .ant-table-column-title {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #58647b;
  }
  /deep/ .ant-table-tbody > tr > td {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #606266;
  }

  /*滚动条样式-开始*/
  ::-webkit-scrollbar {
    width: 6px;
    margin-left: 2px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background: #f1f4fa;
    margin-left: 2px;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(26, 25, 25, 0.3);
    background-color: rgba(0, 0, 0, 0.1);
  }
  /*滚动条样式-结束*/

  /deep/ .ant-table-tbody .ant-table-row:nth-child(2n) {
    background: rgba(229, 237, 253, 0.4);
  }
  /deep/ .ant-table-tbody > tr > td {
    border-bottom: none;
  }
}
</style>

1、对元素绑定滚动事件：this.$refs.session.addEventListener(‘scroll‘, this.sessionFunction)

2、对元素移除滚动事件：this.$refs.session.removeEventListener(‘scroll‘, this.sessionFunction)

3、获取 内容顶部距离容器顶部的高度【被隐藏在内容区域上方的像素数】：this.$refs.session.scrollTop

4、获取内容的总高度【在没有滚动条的情况下，元素内容的实际总高度】：this.$refs.session.scrollHeight

5、获取可视区高度【可视区高度 + padding】：this.$refs.session.clientHeight