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