背景：實現一個通用化表格元件，根據資料驅動動態建立表頭和行資料以及單元格

優點：無需根據業務場景建立多個Table模板適應多個業務。只需配置對應資料。

圖例：

一、改造前element-ui實現方式

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <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>
</template>

<script>
  export default {
    data() {
      return
 
 {
        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 弄'
        }]
      }
    }
  }
</script>

我們可以發現，目前資料是針對個人資訊定義的 姓名、日期、地址等，在template模板中也是將表頭的name名稱固定好（如上面的 label = "日期" label = "姓名"label = "地址"）。這樣如果我們有其他業務需要使用表格顯示（如圖書表格），就還需要製作一個新的元件，定義新的資料來適配新的業務。

所以我們需要將element-ui改造，使其表格是用資料驅動，動態建立表頭和單元格

二、封裝改變後的table實現

<template>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column  
      v-for="(value, index) in table.tableHeader"          
      :prop=" String(index) "
      :label="value"
    >
    </el-table-column>
    </el-table>
</template>

<script>
    return {
      table:{
        tableData: [
            ['2016-05-01', '張小虎', '瀋陽市普陀區金沙江路 1518 弄'],
            ['2016-05-02', "李小虎", '上海市普陀區金沙江路 1518 弄'],
            ['2016-05-03', '王小虎', '北京市普陀區金沙江路 1518 弄']
        ],
        tableHeader: ['日期', '姓名', '地址']
      }
    }
</script>