<template>
<div>
<div class="title">
<h3>尺码详情</h3>
</div>
<el-divider></el-divider>
<el-table style="width: 300px" :data="getValues" :show-header="false">
<el-table-column
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
align="center"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
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.value] }),
{ title: item.label }
);
});
},
},
data() {
return {
tableData: [
{ size1: "160/74A", size2: "XS", size3: "201" },
{ size1: "165/72A", size2: "S", size3: "202" },
{ size1: "170/76A", size2: "M", size3: "203" },
],
headers: [
{ label: "号型", value: "size1" },
{ label: "规格", value: "size2" },
{ label: "尺码编码", value: "size3" },
],
};
},
};
</script>
el-table表头竖向排在第一列
于 2024-03-27 09:54:15 首次发布