第一种方式:利用插槽进行数据绑定
//html文件
<el-table :data="tableData" border>
<el-table-column v-for="(item, i) in tableHeader" :key="i" :label="item">
<template slot-scope="scope">
{{ tableData[scope.$index][i] }}
</template>
</el-table-column>
</el-table>
//js
data() {
tableData: [
[1, 2, 3, 4],
[3, 4, 5, 6]
],
tableHeader: ["资质类别", "资质证书号", "资质名称", "考核结果"]
}
第二种方式:利用组建自带的prop进行数据绑定;
//html
<el-table :data="tableData" border>
<el-table-column v-for="(item,i) in tableHeader" :key="i" :label="item.name" :prop="item.value">
</el-table-column>
</el-table>
//js
data(){
tableHeader:[
{
name:'资质类别',
value:"Name"
},
{
name:'资质证书号',
value:"Name1"
},
{
name:'资质名称',
value:"Name2"
},
{
name:'考核结果',
value:"Name3"
},
],
tableData: [
{
Name:1 ,
Name1:11 ,
Name2:111,
Name3:11111
},
],
}