vue+vxe-table中的vxe-table-column配合v-if导致列样式与位置错乱

   <vxe-table-column 
   		v-if="pageInfo.id === 4 ||pageInfo.id === 8" 
   		title="上报类型" 
   		width="100" 
   		key='1'>
          <template v-slot="{row}">
            <span v-if="row.reportType == 1">API</span>
            <span v-else>咨询工具</span>
          </template>
    </vxe-table-column>

修改后

   <vxe-table-column 
   		v-if="pageInfo.id === 4 ||pageInfo.id === 8" 
   		title="上报类型" 
   		width="100" 
   		key='1'>
          <template v-slot="{row}">
            <span v-if="row.reportType == 1">API</span>
            <span v-else>咨询工具</span>
          </template>
    </vxe-table-column>
    //或者
       <vxe-table-column 
   		v-if="pageInfo.id === 4 ||pageInfo.id === 8" 
   		title="上报类型" 
   		width="100" 
   		:key="Math.random()">
          <template v-slot="{row}">
            <span v-if="row.reportType == 1">API</span>
            <span v-else>咨询工具</span>
          </template>
    </vxe-table-column>

给使用了v-if的列，加一个固定的key值，或循环渲染key即可；