element-ui table组件动态渲染表头

第一种方式：利用插槽进行数据绑定

//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 
        },
      ],
}