对话框中el-table有空间但是显示滚动条bug

旺仔布丁

已于 2025-02-14 10:31:48 修改

阅读量716

点赞数 9

CC 4.0 BY-SA版权

文章标签： bug vue.js elementui

于 2025-02-14 09:55:18 首次发布

本文链接：https://blog.csdn.net/hcyhcyhcy_/article/details/145626550

在使用 Element UI 的 el-table 组件时，如果你发现表格有空间但仍然显示滚动条，这通常是由于表格的某些属性或样式设置不正确导致的。以下是一些可能的原因和解决方法：

检查 height 属性
el-table 组件有一个 height 属性，用于设置表格的高度。如果你设置了高度，但是没有足够的行来填满这个高度，表格就会显示滚动条。
解决方法：
确保 height 属性的值足够大，或者不设置 height，让表格根据内容自动调整高度。

<!-- 不设置高度 -->
<el-table :data="tableData" 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>

检查外部容器样式
有时候，外部容器（如 el-table 的父容器）的样式设置也可能影响 el-table 的显示。例如，如果父容器设置了 overflow: auto;，即使 el-table 没有滚动条，也可能因为父容器的设置而显示滚动条。
解决方法：
检查并修改父容器的样式，确保它不会强制显示滚动条。

.parent-container {
  overflow: hidden; /* 或根据需要使用 visible */
}

使用 max-height 而非 height
如果你希望表格有最大高度限制，但不想固定高度，可以使用 max-height 属性。

<el-table :data="tableData" max-height="400" 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>

表格数据加载问题
在表格数据加载过程中，如果数据还未完全加载就计算了表格高度，可能会导致滚动条显示异常。
解决办法
使用 v-if 控制表格渲染：确保在数据加载完成后再渲染表格。

<template>
  <el-dialog title="对话框标题" :visible.sync="dialogVisible">
    <el-table :data="tableData" v-if="tableData.length > 0">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: []
    };
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.tableData = [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ];
    }, 1000);
  }
};
</script>