el-table 纵向垂直表头

el-table 纵向垂直表头

Element el-table 纵向垂直表头 / el-table 表格纵横转换 / el-table 横向表格

代码里看着应该不是很复杂，但是我个人感觉还是比较绕的。对于初学者来说可能会比较头疼，下面大家先看一下效果图

完整代码贴在最后，直接拉到最后即可

el-table 我们还是用 Element 提供的组件，没有任何改动。我们需要做的只是将原来的 el-table-column 变成动态生成

第一步

先将 el-table 进行编辑，el-table 中的 data 属性数据我们需要进行重新处理，将原来的数据进行纵横转换，这一步理解起来会比较复杂。放到 js 中去讲解

<el-table
  style="width: 100%"
  :data="getValues"
>
  <el-table-column
    v-for="(item, index) in getHeaders"
    :key="index"
    :prop="item"
    :show-header="false"
  >
  </el-table-column>
</el-table>

第二步

数据配置 数据我们需要单独配一次 headers，将原来的表头改成数据动态生成的方式。这个表头的配置需要按照实际数据的 键 与 名称 进行对应。最终渲染时由 第三步 的 getHeaders 来提供数据。具体 getHeaders 要做什么，我们第三步来讲解

headers: [
      {
        prop: 'date',
        label: '日期',
      },
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'address',
        label: '地址',
      },
    ],

第三步

getHeaders 与 getValues

这两个函数我们做计算属性直接使用即可

ps: 如果你对 reduce 还不是很明白，可以看看我的这篇文章 JS Array.reduce 理解与使用

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,});
    });
  }
},

getHeaders:

先看打印结果： ["title", "value0", "value1", "value2", "value3"]

可能你不明白为什么要这么做，想象一下，原来的纵表改为横表以后，我们的第一列就是 title 第二列开始往后都将是 value 但是我们并不知道有多少个 value，所以我们需要通过这种方式来动态的去生成表头，不能使用原来的表头了

既然表头通过 ["title", "value0", "value1", "value2", "value3"] 这个表头定死了，也就意味着我们的数据结果，也必须以这种名字来命名。同时也需要想到 数组中的每个属性就对应的是一列

getValues:

先看打印结果 [ {title: "日期", value0: "2016-05-02", value1: "2016-05-04", value2: "2016-05-01", value3: "2016-05-03"} ]

通过我们的纵横转换以后，我们的数据结果将会变为 数组中的每一个对象都将是一行，每一个属性都将是一列
或许是我不善于表达，只能讲解到这么多了，具体的还需要大家将代码拿去使用断点逐步观察可能会更好理解一些

完整代码

HTML 段

<div class="element-main">
    <div> Element-ui 官方提供 table Demo</div>
    <el-table
      style="width: 100%"
      :data="tableData"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div>===================================== 分割线 =====================================</div>
    <div>行列转换后的 Demo</div>
    <el-table
      style="width: 100%"
      :data="getValues"
      :show-header="false"
    >
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :prop="item"
      >
      </el-table-column>
    </el-table>
  </div>

JS 段

data() {
  return {
    headers: [
      {
        prop: 'date',
        label: '日期',
      },
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'address',
        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,});
    });
  }
},