ant design vue 多個Tabs 標簽頁 下使用 table組件滾動加載的坑 【第一個tab頁可以滾動加載而切換第2 個tab不能觸發】

在ant  design vue   的使用中總會遇到一些坑，如標題所言，這里提供一個解決方法參考用

關鍵代碼如下：

注：這里的table組件不要通過使用 ant 中封裝的 scroll屬性來達到超出高度顯示滾動條的目的，而是自己定義一個內聯樣式：overflow-y：auto;height: 【某固定高度】px;

html:

 js:

 記得頁面銷毀前需要移除滾動

 

 備注：下圖的寫法不可用

 

 

備注：ant design vue 的tab標簽頁的activeKey 必須是String類型，否則可能會出現初始化頁面時候tab頁無內容，點擊后才會有內容以及上述組件中給table綁定滾動事件報錯【沒有這個dom】等情況

完整的組件代碼如下：

<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() {

 　　　window.removeEventListener('scroll', this.sessionFunction)

    　window.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>

上述中對滾動事件的dom操作寫法的調整：其實就是通過ref來獲取元素，綁定事件

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