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>

我们可以发现，目前数据是针对个人信息定义的 姓名、日期、地址等，在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>

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