Element Plus表格数据刷新时单元格跳动的解决方法

如果需要动态显示el-tag，不可使用v-if或v-show。否则会导致表格数据刷新时单元格高度出现跳动的bug。这个bug与el-tag的切换动画无关。

原先的代码

这里如果使用v-if或v-show会导致表格异常跳动

<el-table-column label="账号状态" width="80">
    <template #default="scope">
        <el-tag v-if="scope.row.state === 'ACTIVE'" type="success">正常</el-tag>
        <el-tag v-else-if="scope.row.state === 'BANNED'" type="danger">封禁</el-tag>
        <el-tag v-else type="info">未知</el-tag>
    </template>
</el-table-column>

正确写法（来自官方文档）

以下是正确写法

<el-table-column label="账号状态" width="80">
    <template #default="scope">
        <!-- 这里的disable-transitions（关闭动画）是可选项，bug与此无关 -->
       <el-tag :type="scope.row.state === 'ACTIVE' ? 'success' : 'danger'" disable-transitions>
            {{ scope.row.state === 'ACTIVE' ? '正常' : '封禁' }}
        </el-tag>
    </template>
</el-table-column>

参考

Element-Plus官方文档#表格