element 动态设置表格并匹配表体的值

在实际项目中表格数据都是活的 , 一般都是根据后台返回的 表头 和 表体两部分数据 , 一般有两种格式 :
一种是 数组对象 都是有 对应 key 和 value
另外一种 是 数组 , 但是必须是顺序都是对的

第一种:

<el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%">                	
	<template v-for="(col,index) in cols">                    
	<el-table-column :prop="col.prop" :label="col.label"></el-table-column>                
	</template>              
</el-table>

data(): {
    return: {
   	    cols:[
    	   	{prop: "327", label: "护士"},  
    	   	{prop: "328", label: "护理员组长"},
    	   	{prop: "329", label: "护理员"},
    	   	{prop: "330", label: "输单员"}
	    ],
	    tableData:[
	        {327: "24", 328: "20", 329: "18", 330: "2"},
	        {327: "22", 328: "20", 329: "18", 330: "2"},
	        {327: "22", 328: "20", 329: "18", 330: "2"},
	        {327: "51", 328: "21", 329: "20", 330: "6"},
	        {327: "21", 328: "20", 329: "18", 330: "2"},
	    ]
    }
}

第二种

<el-table :data="table_content" border>                
	<el-table-column :label="val" v-for="(val, i) in table_head" :key="i">                  				
	<template slot-scope="scope">{{table_content[scope.$index][i]}}</template>                
	</el-table-column>              
</el-table>

data(): {
	return: {
		// 表头数据
		table_head:["护士", "护理员组长", "护理员", "输单员"],
		// 表格内容数据
		table_content:[
		    ["24", "20", "18", "2"], 
		    ["22", "20", "18", "2"],
		    ["22", "20", "18", "2"],
		    ["51", "21", "20", "6"],
		    ["21", "20", "18", "2"],
		],
		
	}
}

如果有用请点赞