在实际项目中表格数据都是活的 , 一般都是根据后台返回的 表头 和 表体两部分数据 , 一般有两种格式 :
一种是 数组对象 都是有 对应 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"],
],
}
}
如果有用请点赞