elementUi+table实现表格数据滚动

在使用 Element UI 的 Table 组件时，可以通过设置 height 属性来实现表格的滚动。此外，如果你需要垂直和水平滚动，可以使用 CSS 的 overflow 属性。

以下是一个简单的例子，展示了如何设置表格的高度和启用滚动功能：

<template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="overflow: auto;">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 填充数据
      ]
    }
  }
}
</script>
 
<style>
/* 确保外部容器有固定高度 */
.el-table__body-wrapper {
  overflow-y: scroll;
}
</style>

在这个例子中，height 设置为 250px，这意味着表格的主体部分将会有一个固定高度的滚动容器。CSS 规则 .el-table__body-wrapper 确保了垂直滚动条的存在。

请注意，如果你的表格头部或其他部分的高度不是固定的，你可能需要调整这些部分的高度或者使用其他的 CSS 技巧来确保表格的滚动效果正常。