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

1.遇到的问题：

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

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

2.现象：

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

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

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

3.原始代码

<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，就可以随着父容器正常变化了！

.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方向定义三行：代码如下

<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;即可解决问题！

.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;}}
}