vue3 + element-plus 设置表格自动滚动

在Vue 3和Element Plus中，要设置表格（el-table）自动滚动，可以使用CSS样式或Element Plus的属性。

使用CSS样式，可以为表格外层容器设置固定高度并开启滚动：

<template>
  <el-table
    :data="tableData"
    height="200" <!-- 设置固定高度 -->
    style="overflow-y: auto;" <!-- 开启滚动 -->
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue'
 
const tableData = ref([
  // 数据
])
</script>
 
<style>
.el-table__body-wrapper {
  overflow-y: auto !important;
}
</style>

使用Element Plus的属性，可以利用max-height属性设置表格的最大高度，这样当数据溢出时表格会自动显示滚动条：

<template>
  <el-table
    :data="tableData"
    max-height="200" <!-- 设置最大高度 -->
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue'
 
const tableData = ref([
  // 数据
])
</script>

以上两种方式都可以实现表格的自动滚动。选择其中一种根据实际需求应用即可。