由于页面设计的功能要求，所以，页面的表格头以及表格的数据都是由后端返回来的，所以我们通过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是该列中的数据文章来源：https://www.toymoban.com/news/detail-505291.html
{
prop:"id1", // 表格列中的数据
name:"住址1", // 表格头的数据
}tableData中的数据是表格内容的数据，有几个id就是有几行数据文章来源地址https://www.toymoban.com/news/detail-505291.html
到了这里，关于使用v-for循环遍历element-ui的表格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
