由于页面设计的功能要求,所以,页面的表格头以及表格的数据都是由后端返回来的,所以我们通过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获取接口数据的这里就不写了
直接放页面的效果
![](https://i-blog.csdnimg.cn/blog_migrate/776976c66c7b57277f3298cc756fbe2c.png)
tableTitleList中的数据name是表格头的数据,prop是该列中的数据
{
prop:"id1", // 表格列中的数据
name:"住址1", // 表格头的数据
}
tableData中的数据是表格内容的数据,有几个id就是有几行数据