Element UI 封装Table --> 实现动态创建表头和单元格数据（无需写死表头和单元格数据）

背景：实现一个通用化表格组件，根据数据驱动动态创建表头和行数据以及单元格

优点：无需根据业务场景创建多个Table模板适应多个业务。只需配置对应数据。

图例：

 一、改造前element-ui实现方式

<template>
  <el-table
    :data="tableData"
    border
    style=" 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=" 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一致。

至此我们对一个简单的表格封装完毕，希望在自己总结的过程中帮到其他朋友，如有什么问题？欢迎一起交流。