vue elementui table去掉滚动条与实现表格自动滚动且无滚动条

在Vue中使用Element UI的Table组件时，如果你想去掉滚动条，可以通过CSS隐藏滚动条，并禁用表格的滚动功能。如果你想让表格在数据更新时自动滚动至底部，可以在数据更新后使用原生JavaScript的滚动方法。

CSS隐藏滚动条的方法：

/* 隐藏元素滚动条 */
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* 对于WebKit浏览器 */
}
 
.hide-scrollbar {
    -ms-overflow-style: none; /* 对于IE和Edge */
    scrollbar-width: none; /* 对于Firefox */
}

禁用表格滚动并使用外部滚动的方法：

<template>
  <el-table
    :data="tableData"
    class="custom-table"
    :height="tableHeight"
    ref="customTable"
  >
    <!-- 列配置 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeight: '500px', // 根据需要设置表格高度
    };
  },
  mounted() {
    // 模拟数据更新
    setInterval(() => {
      this.tableData.push({ /* 新数据对象 */ });
      // 滚动表格至底部
      this.$nextTick(() => {
        const tableBody = this.$refs.customTable.$el.querySelector('.el-table__body-wrapper');
        tableBody.scrollTop = tableBody.scrollHeight;
      });
    }, 1000); // 每秒更新一次数据并滚动
  },
};
</script>
 
<style>
.custom-table {
  overflow: auto; /* 开启外部滚动 */
}
</style>

在这个例子中，.custom-table 类被用于 .el-table 元素，并且设置了一个固定的高度。外部滚动条由 .custom-table 的 overflow: auto; 属性来控制。在 mounted 钩子中，我们模拟了数据的定期更新，并使用 $nextTick 方法确保DOM已更新后执行滚动逻辑。这里的关键是 tableBody.scrollTop = tableBody.scrollHeight; 语句，它将滚动条位置设置到最底端。