解决Grid布局下el-table自适应缩小失败的问题

1.遇到的问题：

使用了ElementPlus的el-table组件，同时将该组件用在了grid布局下。

拖动浏览器窗口，视口宽度变大时，el-table的宽度会跟着一起变大，但视口缩小时，表格不会跟着一起缩小，而是固定了当前的宽度，导致内容溢出。

2.现象：

1.原始状态：红色区域200px，蓝色区域minmax(auto, 1fr)，绿色区域300px;

2.浏览器视口宽度变大：表格会跟着一起变大

3.浏览器视口宽度缩小：表格宽度固定，内容溢出

3.原始代码

html 复制代码

<template>
  <div class="wrap">
    <div class="bg-red-500">1</div>
    <div class="bg-blue-500">
      <div>
      <el-table :data="data">
        <el-table-column label="日期1" prop="date"></el-table-column>
        <el-table-column label="日期2" prop="date"></el-table-column>
        <el-table-column label="日期3" prop="date"></el-table-column>
        <el-table-column label="日期4" prop="date"></el-table-column>
      </el-table>
      </div>
    </div>
    <div class="bg-green-500">3</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const data = ref([
  { date: '2016-05-02' },
  { date: '2016-05-04' },
  { date: '2016-05-01' },
  { date: '2016-05-03' }, 
])

</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 200px minmax(auto, 1fr) 300px;

}
</style>

4.问题出在哪里？

关键就在于中间列的minmax(auto, 1fr)，以及el-table对于自身最小宽度的计算，产生了影响。

当视口放大时，el-table重新计算最小宽度，此时最小内容宽度不断变大。

当我们开始缩小视口宽度时，grid列的最小宽度是由auto计算出来的，而auto默认等于子元素的最小内容宽度，所以列宽就不能比表格最小内容宽度更小。

所以中间列的宽度才无法变小。

5.解决方案

直接给中间那一列指定最小宽度min-width: 0;

表示"我允许grid的这一列，在必要的时候变得比内容还小"，此时grid的自动计算逻辑就会被打破！中间那一列的表格el-table，就可以随着父容器正常变化了！

css 复制代码

.wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 200px minmax(auto, 1fr) 300px;
  .table-col {
    min-width: 0;
  }
}

我看到有其他文章说可以给父元素设置position:relative;，子元素设置position:absolute;。同样可以解决问题，但这样设置很显然会影响子元素的布局。它能实现是因为子元素脱离了文档流，已经不再归属于grid的管辖范围了，所以我是不太建议这么解决的。

另外补充一下，中间那一列，我们很可能也会再次定义grid布局，比如

在row方向定义三行：代码如下

html 复制代码

<template>
  <div class="wrap">
    <div class="bg-red-500">1</div>
    <div class="table-col bg-blue-500">
      <div>
        <el-table :data="data">
          <el-table-column label="日期1" prop="date"></el-table-column>
          <el-table-column label="日期2" prop="date"></el-table-column>
          <el-table-column label="日期3" prop="date"></el-table-column>
          <el-table-column label="日期4" prop="date"></el-table-column>
        </el-table>
      </div>
      <div class="bg-[#000]">123456</div>
      <div class="bg-[#000]">7890</div>
    </div>
    <div class="bg-green-500">3</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const data = ref([
  { date: '2016-05-02' },
  { date: '2016-05-04' },
  { date: '2016-05-01' },
  { date: '2016-05-03' }, 
])


</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 200px minmax(auto, 1fr) 300px;
  .table-col {
    min-width: 0;
    display: grid;
    grid-template-rows: 300px 200px 200px;
    gap: 8px;
  }
}
</style>

el-table，加了一层div，此时表格也会溢出的

这是因为min-width不是定义在表格的父元素了。

这个时候要改的就是给el-table的父元素再加一个min-width: 0;即可解决问题！

css 复制代码

.wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 200px minmax(auto, 1fr) 300px;
  .table-col {
    min-width: 0;
    display: grid;
    grid-template-rows: 300px 200px 200px;
    gap: 8px;
    .table-col-1 {
      min-width: 0;
    }
  }
}