使用v-for循环遍历element-ui的表格

由于页面设计的功能要求，所以，页面的表格头以及表格的数据都是由后端返回来的，所以我们通过axios获取接口的数据后，通过v-for循环遍历表格的全部数据

HTML的代码如下：

<el-table
   ref="multipleTable"
   :data="tableData"
   stripe
   :header-cell-style="{background:'#F3F6FB',color:'#606266',fontSize:'14px',fontWeight:'400',height:'44px'}"
   style="width: 100%"
   :row-style="{height: '90px'}"
   row-key="id"
   id="tableId">
       <el-table-column
       v-for="item in tableTitleList"
       :label="item.name"
       align="center"
       :width="tableTitleList.length>6?'220':''"
       >
           <template slot-scope="scope">
               <div v-if="scope.row[item.prop]==null">暂无数据</div>
               <div v-if="scope.row[item.prop]!==null">{{scope.row[item.prop]}}</div>
           </template>
       </el-table-column>
</el-table>

js的代码如下，我是使用的vue

<script>
    export defalt {
        data () {
            return {
                tableData: [
                    {
                        id1:"北京",
                        id2:"上海",
                        id3:"揭阳",
                        id4:"深圳",
                        id5:"潮汕"
                    },
                    {
                        id1:"汕头",
                        id2:"广州",
                        id3:"东莞",
                        id4:"银川",
                        id5:"太原"
                    },
                    {
                        id1:"成都",
                        id2:"扬州",
                        id3:"南宁",
                        id4:"肇庆",
                        id5:"颍川"
                    },
                    {
                        id1:"哈尔滨",
                        id2:"拉萨",
                        id3:"桂林",
                        id4:"沈阳",
                        id5:"长安"
                    }
                ],
                tableTitleList: [
                    {
                        prop:"id1",
                        name:"住址1",
                    },
                    {
                        prop:"id2",
                        name:"住址2",
                    },
                    {
                        prop:"id3",
                        name:"住址3",
                    },
                    {
                        prop:"id4",
                        name:"住址4",
                    },
                    {
                        prop:"id5",
                        name:"住址5",
                    }
                ]
            }
        }
    }
</script>

通过axios获取接口数据的这里就不写了

直接放页面的效果

tableTitleList中的数据name是表格头的数据，prop是该列中的数据

{
    prop:"id1",        //  表格列中的数据
    name:"住址1",       //  表格头的数据
}

tableData中的数据是表格内容的数据，有几个id就是有几行数据