在ant design vue 的使用中总会遇到一些坑，如标题所言，这里提供一个解决方法参考用
关键代码如下：
注：这里的table组件不要通过使用 ant 中封装的 scroll属性来达到超出高度显示滚动条的目的，而是自己定义一个内联样式：overflow-y：auto;height: 【某固定高度】px;
html:
js:
记得页面销毁前需要移除滚动
完整的组件代码如下：
<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>
上述中对滚动事件的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
ant design vue 多个Tabs 标签页 下使用 table组件滚动加载的坑 【第一个tab页可以滚动加载而切换第2 个tab不能触发】