<template>
<div class="g-content">
<el-table style="width: 100%" :data="getValues" :show-header="false">
<el-table-column
stripe
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
headers: [
{
prop: "date",
label: "公司名称",
},
{
prop: "name",
label: "客户来源",
},
{
prop: "address",
label: "手机",
},
{
prop: "date",
label: "电话",
},
{
prop: "name",
label: "企业规模",
},
{
prop: "address",
label: "备注",
},
],
tableData: [
{
date: "2016-05-02123123",
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 }
);
});
},
},
};
</script>