el-table表头动态渲染未更新

问题

el-table的表头改为通过获取后端数据动态渲染，发现在请求接口后，表头并未重新渲染。

//html
<el-table :data="tableData">
    <el-table-column v-for="(item,index) in tableCol" :key="index">
        <template slot="header">{{item.colName}}</template>
        <template slot-scope="scope">
            {{scope.row[item.prop]}}
        </template>
    </el-table-column>
</el-table>

//js
tableCol:[
    {
        colName: '姓名',
        prop: 'name'
     },
     {
         colName: '年龄',
         prop: 'age'     
     }
]

api.get('/tableColData').then(res=>{
    this.tableCol = res.data
})

解决

给el-table-column绑定key时添加一个随机数拼接

<el-table-column v-for="(item,index) in tableCol" :key="Math.random()+index">
</el-table-column>

题外话

在循环生成数据项的时候，并不建议直接使用index项作为key，由于index都是从0开始，并不能作为唯一key，去方便vue跟踪变化进而重新渲染页面