Element-UI根据后台数据动态创建表格

Element-UI集合Vue最近真的是大火啊,很多后台管理系统都在使用这套模式,我也如此,最近遇到个小需求,一时难倒了，就是根据后台返回数据,动态创建表格,其表格无一处是固定的,表头啊,内容都是动态的,大家都知道,使用ElementUI直接使用，直接套用官网代码即可,如下：

<template>
    <el-table
      :data="tableData"
      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>

如上,即可实现一个表格,但上面方法是表头固定，每次后台传输的JSON的Key值是固定的,但是当Key值不固定又当如何,我们可以如下这样写：

<template>
    <el-table border :data="data_list" id="mounth">
        <el-table-column id="table"  :label="date"  v-for="(date, key) in header">
           <template scope="scope">
             {{data_list[scope.$index][key]}}
           </template>
        </el-table-column>
    </el-table>
</template>

如上创建Table元素

①：data="data_list"                      →表格内容数据

②{{data_list[scope.$index][key]}}  →通过①数据绑定,以此填入表格内容中

③：label="date"                            →表头数据

④v-for="(date, key) in header"      →通过循环header将date复制至：label

接下来,只需要从后台出请求数据对json键值对提取复制给data_list以及header就可以啦,具体json如何提取对应所需值可以参考如下链接：

ElementUI动态创建表格