Element UI 封裝Table --> 實現動態創建表頭和單元格數據（無需寫死表頭和單元格數據）

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

優點：無需根據業務場景創建多個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>

參數名稱	類型	描述	備注
table	Object	表格數據對象

 

 

 

參數名稱	類型	描述	備注
tableData	Array	行數據列表	tableData中的每一個Item都是表格中的一行數據 注意：二維數組中的每一個元素是必須和tableHeader數組中的元素索引一一對應，並保證length一致。
tableHeader	Array	表頭列表	注意：表頭中元素的個數及索引需要和tableData中二維數組中的每個元素一一對應，且保證length一致。

 

 

 

 

 

 

至此我們對一個簡單的表格封裝完畢，希望在自己總結的過程中幫到其他朋友，如有什么問題？歡迎一起交流。