el-table本地与线上的样式不一致出现错乱

使用el-table的时候有几个表头是循环出来的，出现在本地运行的时候，表头内el-input输入框样式正常，但是发布以后出现样式错乱问题

线上样式错乱：​

本地正常：

 出现这个问题的原因是我有几个表头是循环出来的，初始话的时候，循环数组为空，后面取到值以后再渲染出来导致，表格渲染出现错误。

<!-- 循环的头部 -->
<el-table-column v-for="item1 in state.headList" :key="item1.displayName" :label="item1.displayName" align="center" width="80"><template #default="{ row }">{{ row.attributes[item1.displayName] }}</template>
</el-table-column>

 解决方法：在el-table上加上 :key，然后在获取数据以后动态更改el-table的key让它强制刷新

<el-tablemax-height="600"ref="multipleTableRef":data="priceData"v-loading="state.loading"border@selection-change="handleSelectionChange"// 这行:key="tableKey"
><!-- 循环的头部 --><el-table-column v-for="item1 in state.headList" :key="item1.displayName"                                   :label="item1.displayName" align="center" width="80"><template #default="{ row }">{{ row.attributes[item1.displayName] }}</template></el-table-column>
</el-table>// 获取数据的方法
const getPriceData = () => {// 数据赋值priceData.value =[];// 重新生成table keytableKey.value = Math.random();
};