<el-table style="width: 100%" :data="getValues" :show-header="false" :cell-style="cellStyle" border > <el-table-column v-for="(item, index) in getHeaders" :key="index" :prop="item" > </el-table-column> </el-table>
data () { return { headers: [ { prop: 'date', label: '先进企业', }, { prop: 'name', label: '进步企业', }, ], tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; },
computed: { getHeaders () { return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title']) }, getValues () { return this.headers.map(item => { return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, }); }); } },
cellStyle ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { return "background:#f5f7fa;text-align: center;"; } },
标签:pre,el,return,name,王小虎,普陀区,表头,竖向,date From: https://www.cnblogs.com/dianzan/p/17254824.html