原因是因為表格是element-ui通過循環產生的,而vue在dom重新渲染時有一個性能優化機制,就是相同dom會被復用,通過key去標識一下當前行是唯一的,不許復用,就行了。
在其和其之后的一個顯示的組件上添加 :key="Math.random()"
<el-table-column
:label="$t('customer.name')"
prop="name"
:show-overflow-tooltip="true"
v-if="showColumn('Name')"
:sort-orders="['descending', 'ascending']"
:key="Math.random()"
>
<template slot="header">
<span>{{ $t('customer.name') }}</span>
<span
class="icon-wrapper"
v-if="isSortable('customerName')"
@click="handleSortTable('customerName')"
>
<svg-icon
iconClass="caret-bottom"
v-if="sortProp === 'customerName' && sortOrder === 'ascending'"
/>
<svg-icon
iconClass="caret-top"
v-else-if="
sortProp === 'customerName' && sortOrder === 'descending'
"
/>
<svg-icon v-else iconClass="caret-null" />
</span>
</template>
..............................