VUE项目中，动态绑定table表头和表中数据

在项目开发中，经常会用到列表，如果是固定的表头和列表数据，那直接for循环就可以绑定数据了。

但是，如果表的表头和列表中的数据是动态变化的，或者表头数组中的字段和列表中的数据字段不是按安顺序一一对应的时候怎么处理？

以下是表头和列表数据：

          tableHead:[
                {key:"name",title:'姓名'},
                {key:"sex",title:'性别'},
                {key:"phone",title:'手机号'},
                {key:"state",title:'状态'},
                {key:"address",title:'地址'}
            ],  
            tableData:[
                {name:"张三",phone:"13811112222",state:1,sex:1,address:"北京"}, 
                {name:"王晓飞",phone:"15634567922",state:0,sex:2,address:"天津"}, 
                {name:"李浩",phone:"15634567922",state:0,sex:0,address:"北京"}, 
                {name:"张明",phone:"15634567922",state:0,sex:1,address:"北京"}, 
            ]

仔细观察这两个数据，发现两个数组中的数据没有一一对应（列表中的数据phone、state在sex前面去了）。此时，在HTML中绑定时，就不能执行普通的for就行，那具体操作如何，看以下代码：

<table class="listTab" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th v-for="(item,val) in tableHead">{
  {item.title}}</th>