Vue+Element ui 根据后台返回数据设置动态表头

由于后端是多人开发，也没有规范数据格式，所有页面是我一个人开发，所以就会遇到同样的页面不同的返回数据格式问题。

一、根据element文档，利用prop属性绑定对应值，label绑定表头。

• html

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

二、返回的数据都是数组形式，值与表头按照数组下标相对应。

• html

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