elementui table滚动事件

可以使用elementui的el-table组件中的@scroll事件来监听表格的滚动事件。具体代码如下：

<template>
<el-table :data="tableData" height="250" @scroll.native="handleScroll">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>

<script>
export default {
data() {
return {
tableData: [],
};
},
methods: {
handleScroll() {
console.log('table is scrolling');
},
},
};
</script>

相关问题

elementui table 滚动条样式

您可以使用以下CSS样式自定义elementui表格的滚动条：

.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 5px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #f5f5f5;
}

请注意，这只是一个示例样式，您可以根据自己的需要进行更改和调整。

elementui table 滚动条背挡住了怎么办

你可以通过设置 `table` 的样式来解决这个问题。具体操作如下：

1. 给 `el-table` 添加一个 `class`，例如 `my-table`。

2. 在 CSS 中添加以下样式：

   .my-table .el-table__body-wrapper {
     overflow: auto;
     max-height: 200px; /* 根据实际情况设置 */
   }
   
   .my-table .el-table__fixed-body-wrapper {
     overflow: auto;
     max-height: 200px; /* 根据实际情况设置 */
   }

其中，`.my-table` 是你在第一步中添加的 `class`，`max-height` 是设置滚动条区域的最大高度。如果你的表格高度不确定，可以使用 `max-height: calc(100vh - Xpx);`，其中 `X` 为除表格外其他元素高度之和。

如果你的表格存在固定列，请同时添加第二个样式。

如果你的表格存在分页，请注意将滚动条样式应用于分页后的表格。

如果你的表格存在合并行或列，请注意计算表格高度时将合并单元格展开。

以上操作应该能够解决你的问题。如果还有疑问，请随时问我。