直接上代码:
// 第一种
<el-table height="100%" :data="tableData">
<template v-for="(item, index) in tableHead">
<el-table-column align="center" :label="item.column_comment" :key="index">
<template slot-scope="scope">
{{ scope.row[item.column_name] }}
</template>
</el-table-column>
</template>
</el-table>
// 第二种
<el-table height="100%" :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column align="center" :prop="item.column_name" :label="item.column_comment" :key="index"></el-table-column>
</template>
</el-table>
数据:
// 表头数据
tableHead:[
{
column_name: "column_name",column_comment:"姓名"
},
{
column_name: "column_age",column_comment:"年龄"
},
{
column_name: "column_sex",column_comment:"性别"
}
],
// 表格数据
tableData: [{
column_age: '23',
column_name: '李白',
column_sex: '男'
},
{
column_age: '25',
column_name: '杜甫',
column_sex: '男'
},
{
column_age: '18',
column_name: '李清照',
column_sex: '女'
}],