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

**Vue ElementUI Table 滚动条去除与自动滚动**

在实际的开发中，我们经常会遇到需要显示大量数据的表格场景。在这种情况下，滚动条是必不可少的。但有时我们可能希望去掉滚动条，让表格看起来更加整洁和美观。同时，我们也希望能够实现自动滚动功能，使得用户在浏览表格时可以更方便地查看数据。

本文将介绍如何使用 Vue ElementUI 实现去除滚动条的表格，并且添加自动滚动功能。

### 去除滚动条首先，我们需要了解 ElementUI 中表格的基本结构。我们可以通过以下代码来创建一个简单的表格：

html<template>
 <div>
 <el-table :data="tableData" style="width:100%;height:500px;">
 <!-- 表格内容 -->
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 // 表格数据 ]
 }
 }
}
</script>

在上述代码中，我们使用 `style` 属性来设置表格的高度和宽度。这样我们就可以实现去除滚动条的效果。

但是，这种方法存在一个问题：当表格内容过多时，用户可能需要滚动才能查看所有数据。这时候，我们就需要添加自动滚动功能了。

### 自动滚动为了实现自动滚动，我们可以使用 JavaScript 的 `scroll`事件来监听页面的滚动。具体代码如下：

javascript<template>
 <div ref="tableContainer">
 <el-table :data="tableData" style="width:100%;height:500px;">
 <!-- 表格内容 -->
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 // 表格数据 ]
 }
 },
 mounted() {
 this.$refs.tableContainer.addEventListener('scroll', () => {
 const scrollHeight = this.$refs.tableContainer.scrollHeight;
 const clientHeight = this.$refs.tableContainer.clientHeight;
 const scrollTop = this.$refs.tableContainer.scrollTop;

 if (scrollTop + clientHeight >= scrollHeight) {
 // 滚动到表格底部 this.$refs.tableContainer.scrollTop = scrollHeight - clientHeight;
 }
 });
 },
 beforeDestroy() {
 this.$refs.tableContainer.removeEventListener('scroll', () => {});
 }
}
</script>

在上述代码中，我们使用 `ref` 属性来获取表格容器的 DOM 元素。然后，我们监听 `scroll`事件，并且检查滚动条是否已经滚到底部。如果是，则我们将滚动条滚动到表格底部。

这样，我们就实现了去除滚动条和自动滚动功能的表格。

### 总结在本文中，我们介绍了如何使用 Vue ElementUI 实现去除滚动条的表格，并且添加自动滚动功能。通过使用 `style` 属性来设置表格高度和宽度，以及监听 `scroll`事件并检查滚动条是否已经滚到底部，我们可以实现上述功能。

希望本文对您有所帮助。如果您有任何问题或建议，请随时与我联系。