el-table表头竖向排在第一列

ni n55!w!

已于 2024-04-09 18:15:29 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： elementui

于 2024-03-27 09:54:15 首次发布

本文链接：https://blog.csdn.net/weixin_44037158/article/details/137067539

本文介绍了如何使用Vue.js中的el-table组件展示服装尺码信息，通过计算属性管理表头和数据映射，提供了一段关于前端开发中表格布局的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>