Vue Element Plus表格渲染异常：表头与内容对齐方式不一致

未添加任何自定义CSS，仅使用Element Plus默认深色模式样式，出现表格表头左对齐、数据内容居中对齐的异常，相关代码如下：

<template>
    <div class="flex flex-wrap gap-4 items-center">
        <el-button @click="reload" title="Refresh" type="info">
            <el-icon>
                <Refresh />
            </el-icon>
        </el-button>
    </div>
    <el-table v-loading="loading" :data="stats">
        <el-table-column prop="cat_code" label="category" width="200" />
        <el-table-column prop="type_code" label="type" width="200" />
        <el-table-column prop="iso_code" label="lang" width="100" />
        <el-table-column prop="missing" label="missing" width="100" />
        <el-table-column prop="obsolete" label="obsolete" width="100" />
        <el-table-column prop="good" label="good" width="100" />
    </el-table>
</template>

实际效果：

异常原因分析 #

1. 样式框架冲突：代码中使用了flex等Tailwind CSS类，Tailwind的全局样式可能覆盖了Element Plus表格单元格的默认对齐规则，导致单元格被设置为居中，而表头未受影响。
2. 版本样式bug：部分旧版本的Element Plus深色模式存在表格样式逻辑漏洞，表头和单元格的对齐样式未统一。
3. 数据类型自动对齐：如果missing、obsolete、good等字段为数值类型，Element Plus会对数值型单元格自动应用居中对齐样式，但表头没有对应逻辑，造成对齐差异。

内容的提问来源于stack exchange，提问作者nagylzs