切换显示el-table 设置min-width的列会收缩一下如何解决？

Question

技术：vue + element-ui
场景：页面中有个按钮切换表格显示还是卡片显示（切换时使用v-if隐藏表格），当从卡片显示模式中切换成表格显示时，表格中设置min-width的列会收缩。表格左右两边各有一列固定。当且仅当页面完全能容下表格，使设置min-width的列宽度比min-width预设值大的时候，隐藏表格在进行显示的时候，设置min-width会收缩一下。如果表格中数据很少，没有触发y轴滚动，就不会出现收缩，如果触发滚动，就会收缩
排查出来原因：切换的时候，表格刚出来没有给y轴滚动条分配空间，之后不知道内部怎么操作，然后又给了y轴滚动条空间，所以导致宽度缩小了一个滚动条的大小，导致min-width列收缩了，但是不知道怎么解决

1.切换时使用的v-if，改成v-show会出现更多问题；
2.在切换时使用doLayout，不生效还是会出现收缩问题；
3.在Update和beforeUpdate使用doLayout，不生效
4.将min-width改成大的值，可以暂时解决，但是浏览器如果缩放，还是会出现这个问题
5.改成width，这样就会出现表格站不满空间，导致表格内部列和固定列分割
6.绑定了表格列绑定了key值也不行

Answer 1

设置flex-shrink：0属性即可

Answer 2

给 doLayout 用 nextTick 包裹一下？

Answer 3

1.设置表格和 header 的样式：

• 使用 display: flex 和 flex-shrink: 0 来防止列宽收缩。
• 同时保证表格和 header 的滚动条同步。

2.同步表格和 header 的滚动条：
通过 JavaScript 同步表格和 header 的滚动条，使它们保持一致。

示例

<template>
  <div class="table-container">
    <div class="table-header" ref="header">
      <el-table :data="tableData" ref="headerTable" :header-cell-style="headerCellStyle">
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :min-width="column.minWidth"
          :style="{ flexShrink: 0 }"
        />
      </el-table>
    </div>
    <el-table :data="tableData" ref="table" @scroll.native="syncScroll">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :min-width="column.minWidth"
        :style="{ flexShrink: 0 }"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: 'Name', minWidth: '150px' },
        { prop: 'age', label: 'Age', minWidth: '100px' },
        // 其他列定义
      ],
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        // 其他数据
      ]
    };
  },
  methods: {
    syncScroll(event) {
      this.$refs.header.scrollLeft = event.target.scrollLeft;
    },
    headerCellStyle() {
      return {
        paddingRight: '17px' // 根据滚动条宽度调整
      };
    }
  }
};
</script>

<style>
.table-container {
  display: flex;
  flex-direction: column;
}

.table-header {
  overflow-x: auto;
}

.el-table {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
</style>