页面放大后，el-table会超出页面

Question

为什么页面放大后，el-table会超出页面，希望它像el-header一样随页面变动而保持固定。父组件设置了固定宽度后也不行（父组件是el-clntainer ）。本人前端不太懂，万分感谢
代码结构和问题页面如下图：

Answer 1

让【道友老李】来帮你解答，本回答参考通义千问qwen-plus编写，并整理提供，如果还有疑问可以点击头像关注，评论或留言

要解决 `el-table` 在页面放大后超出页面的问题，并使其像 `el-header` 一样随页面变动而保持固定，可以采取以下几种方法：

方法一：使用 CSS 设置 el-table 的最大宽度

1. 设置 el-table 的最大宽度： 通过设置 max-width 属性，确保 el-table 不会超过其父容器的宽度。

2. 使用 overflow 属性处理溢出内容： 如果表格内容超过容器宽度，可以使用 overflow: auto 来添加滚动条。

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%; max-width: 100%;">
          <el-table-column prop="date" label="Date" width="180"></el-table-column>
          <el-table-column prop="name" label="Name" width="180"></el-table-column>
          <el-table-column prop="address" label="Address"></el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-04', name: 'Jack', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-01', name: 'Steve', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  }
};
</script>

<style scoped>
.table-container {
  overflow: auto;
}
</style>

方法二：使用 el-scrollbar 包裹 el-table

1. 使用 el-scrollbar 组件： el-scrollbar 是 Element UI 提供的一个滚动条组件，可以方便地处理溢出内容。

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column prop="date" label="Date" width="180"></el-table-column>
          <el-table-column prop="name" label="Name" width="180"></el-table-column>
          <el-table-column prop="address" label="Address"></el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-04', name: 'Jack', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-01', name: 'Steve', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  }
};
</script>

方法三：使用 Flexbox 布局

1. 使用 Flexbox 布局： 通过设置 display: flex 和 flex-wrap: nowrap，确保 el-table 随父容器的宽度变化而变化。

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main class="flex-container">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column prop="date" label="Date" width="180"></el-table-column>
        <el-table-column prop="name" label="Name" width="180"></el-table-column>
        <el-table-column prop="address" label="Address"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-04', name: 'Jack', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-01', name: 'Steve', address: 'No. 189, Grove St, Los Angeles' }
      ]
    };
  }
};
</script>

<style scoped>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
}
</style>

总结

以上三种方法都可以解决 el-table 在页面放大后超出页面的问题。你可以根据具体需求选择合适的方法。如果需要更多的自定义样式，可以进一步调整 CSS 样式。希望这些方法能帮到你！