当我们使用 Element UI 的 Table 表格组件，如果内容条目超出显示区域则会自动出现滚动条。但默认情况下，滚动条是线性滚动的，也就是说滚动停止时表格最上方可能出现只显示半行的情况：

1，样例代码

<template>
  <div class="hello">
    <el-table id="table1" ref="table"
          :data="tableData" height="250"
          style="width: 100%">
          <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>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
      return {
      }
  },
  computed: {
    tableData() {
      let data = [];
      for (var i=1; i<31; i++) {
        data.push({
          date: '2021-12-' + i,
          name: '王小虎' + i,
          address: '上海市普陀区金沙江路 1516 弄'
        });
      }
      return data;
    }
  },
  mounted() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const bodyWrapper = table.bodyWrapper;
      // 监听滚动事件
      bodyWrapper.onscroll = () => {
        // 滚动条位置强制设置指定行上边缘（48为行高）
        bodyWrapper.scrollTop = Math.round(bodyWrapper.scrollTop / 48) * 48; 
      }
  }      
}
</script>

2，效果图

功能改进：自动为内容区域的底部添加外边距

<template>
  <div class="hello">
    <el-table id="table1" ref="table"
          :data="tableData" height="250"
          style="width: 100%">
          <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>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
      return {
      }
  },
  computed: {
    tableData() {
      let data = [];
      for (var i=1; i<31; i++) {
        data.push({
          date: '2021-12-' + i,
          name: '王小虎' + i,
          address: '上海市普陀区金沙江路 1516 弄'
        });
      }
      return data;
    }
  },
  mounted() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const bodyWrapper = table.bodyWrapper;
      // 获取内容显示区域高度，并设置下外边距（设置个延时，否则获取不到高度）
      setTimeout(()=>{
        // 获取显示区域高度
        const bodyHeight = bodyWrapper.clientHeight;
        // 获取实际内容元素
        const content = table.bodyWrapper.firstChild;
        // 给实际内容元素添加下外边距
        content.style["margin-bottom"] = (bodyHeight % 48) + 'px';
      }, 200);      
      // 监听滚动事件
      bodyWrapper.onscroll = () => {
        // 滚动条位置强制设置指定行上边缘（48为行高）
        bodyWrapper.scrollTop = Math.round(bodyWrapper.scrollTop / 48) * 48; 
     }
  }      
}
</script>

（3）运行结果如下：