el-table表头v-for循环遇到的问题

这两天在项目中遇到了el-table表头需要动态变化，也就是点击不同的标签显示对应的表格，主要表头都不一样，那么表格也就是动态的，表头也需要循环

一开始以为很简单

　　<el-table

        :data="tableData"

        style="max-width: 100%">

                <el-table-column (item,index) in columnData :key="index" :prop="item.prop" :label="item.label" align="center">

                </el-table-column>

        </el-table>

然而这样并不行，然后我又开始了我的百度之旅，看到了一篇文章 https://blog.csdn.net/qq_28929589/article/details/79445354  这里面虽然解决了这个问题但是data的数据格式跟我们返回的不是一样的，我希望的数据格式也就是elementui里面的格式，再处理会很麻烦，话不多说，上代码：

<template>

　　<el-table

        :data="tableData"

        style="max-width: 100%">

            <template v-for="(item,index) in headArr" >

                <el-table-column :key="index" :prop="item.prop" :label="item.label" align="center">

                    <template scope="scope">

                        <span>

                            {{scope.row[item.prop]}}

                        </span>

                    </template>

                </el-table-column>

            </template>    

        </el-table>

</template>

<script>

export default {

　　data(){

　　　　return{

　　　　　　headArr:[

                    　　{label:'姓名' , prop : 'name'},

                    　　{label:'年龄' , prop : 'age'},

                    　　{label:'电话' , prop : 'phone'},

　　　　　　],

　　　　　　tableData:[

　　　　　　　　{name:'zhangsan',age:'16',phone:'111'},

                　　　　{name:'lisi',age:'18',phone:'221'}

　　　　　　]

　　　　}

　　}

}

</script>

 

具体为啥要这么写我还不是很懂，如果有了解的朋友可以留言告诉我，让我学习一下