餓了么組件--table組件自定義渲染列，同時伴有v-for和v-if情況

如題，有一個需求，列數量不固定，在一定條件下，可能會（fixedColumn, A2, A3, A4）或（fixedColumn, B2, B3）情況，其中A2, A3, A4會同時出現，B2, B3會同時出現，A與B不會同時出現。
aArray: [ A2, A3, A4],
bArray: [B2, B3],

問題1：

同時有v-for和v-if情況

解決方法

參考vue官方文檔 v-if 與 v-for 一起使用

問題2：

自定義渲染的順序不固定，每次出來的排列結果不一樣

需要加key值，因為這里本身v-for需要有key值，所以自定義列會固定順序。但是對於其他固定列來說，就可能出現排列結果不一致問題。

解決方法

每列都要加上key值，最好是在一個table中不會重復的，這里因為列數較少且簡單，只設置1，2，3等數字。
或者可以使用Math.random()

最終解決方案

<el-table-column prop="fixedColumn" label="固定列名" sortable align="center" key="1"></el-table-column>
<template v-if="isA">
  <el-table-column v-for="item in aArray" :prop="item" :label="`${item}（ms）`" align="center" min-width="200px" :key="`${item}`">
    <template slot-scope="scope">{{scope.row.info[item]}}</template>
  </el-table-column>
</template>
<template v-if="isB">
  <el-table-column v-for="item in bArray" :prop="item" :label="`${item}（ms）`" align="center" min-width="200px" :key="`${item}`">
    <template slot-scope="scope">{{scope.row.info[item]}}</template>
  </el-table-column>
</template>