vue中在DOM中使用v-for数据渲染混乱问题及解决方法

有些时候，当使用v-for渲染数据时，使用了<div v-if="condition"></div>作为条件编译，在浏览器上渲染呈现的内容顺序将会和所渲染的数组顺序不一样

<vxe-colgroup v-for="items in item.childList" :key="items.id" :title="items.name" minwidth="80">
    <div v-if="!items.isSubTotal">
        <vxe-colgroup v-for="itemss in items.items"                 
            :key="itemss.id":title="itemss.itemName" min-width="80">
            <vxe-column :title="itemss.unitName" :field="itemss + '_value'" min-width="80">         
            </vxe-column>
        </vxe-colgroup>
    </div>
    <div v-if="items.isSubTotal">
        <vxe-colgroup v-for="itemss in items.childList" 
        :key="itemss.id":title="itemss.name" min-width="80">
            <vxe-column :title="itemss.unitName" :field="itemss + '_value'" min-width="80">    
            </vxe-column>
        </vxe-colgroup>
    </div>
</vxe-colgroup>

解决方法，避免在v-for中使用div作为v-if判断标签

<vxe-colgroup v-for="itemss in (items.isSubTotal ? items.childList : items.items)" 
:key="itemss.id" :title="itemss.name || itemss.itemName" min-width="80">
    <vxe-column :title="itemss.unitName" :field="itemss + '_value'" min-width="80">            
    </vxecolumn>
</vxe-colgroup>