el-table不触发@scroll
时间: 2023-05-24 20:03:20 浏览: 562
事件怎么解决?
A:如果 el-table 不触发 @scroll 事件,可以尝试在外部的容器元素上绑定 @scroll 事件,并使用 $refs 获取 el-table 的实例对象,然后调用实例对象的 scroll 方法来处理滚动事件。示例代码如下:
```
<template>
<div class="wrapper" @scroll="handleWrapperScroll">
<el-table ref="table" :data="tableData" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
// 表格数据
]
}
},
mounted () {
// 设置 el-table 的 maxHeight 属性,使其支持滚动
this.$nextTick(() => {
this.$refs.table.layout.updateElsHeight()
})
},
methods: {
handleWrapperScroll (event) {
// 获取 el-table 的实例对象
const tableInstance = this.$refs.table
// 调用实例对象的 scroll 方法,传入滚动事件对象
tableInstance && tableInstance.bodyWrapperScroll(event)
}
}
}
</script>
```