vue el table 不出滚动条样式显示 is_scrolling-none，如何修改？

原创于 2025-01-07 17:19:34 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

文章标签：

5 篇文章

订阅专栏

在Vue项目中，如果你使用的是Element UI（现已更名为Element Plus，针对Vue 3）的<el-table>组件，并且发现表格没有显示滚动条，同时样式显示为is-scrolling-none，这通常意味着表格内容没有超出其容器的高度，因此不需要滚动条。

要解决这个问题并让滚动条出现（如果内容确实超出了容器高度），你可以尝试以下几种方法：

1.确保表格容器有固定高度：
<el-table>组件需要在一个具有固定高度的容器中才能正确显示滚动条。如果容器高度是动态的或者没有设置，滚动条可能不会出现。

<div style="height: 400px; overflow: auto;">
  <el-table :data="tableData">
    <!-- 表格列定义 -->
  </el-table>
</div>

在这个例子中，<div>元素被设置为一个固定高度（400px），并且overflow: auto;允许内容溢出时显示滚动条。

2.检查CSS样式：
确保没有其他CSS样式干扰了滚动条的显示。有时候，全局样式或者其他组件的样式可能会影响到<el-table>的滚动行为。

3.使用max-height属性：
Element UI的<el-table>组件提供了一个max-height属性，你可以用它来限制表格的最大高度。当内容超出这个高度时，滚动条会自动出现。

<el-table :data="tableData" max-height="400">
  <!-- 表格列定义 -->
</el-table>

注意，max-height属性会直接应用到<el-table>元素上，而不是它的容器。

4.检查表格内容：
确保表格内容确实超出了你设置的高度。如果内容不够多，滚动条自然不会出现。

5.Vue和Element UI/Plus版本：
确保你使用的Vue和Element UI/Plus版本是兼容的。有时候，版本不匹配可能会导致一些意想不到的问题。

6.查看控制台警告和错误：
打开浏览器的开发者工具，查看控制台是否有任何与Element UI或Vue相关的警告或错误。这些警告或错误可能会提供关于问题的更多线索。