ElementUI表格的动态渲染

在ElementUI官方文档中，描述的动态渲染只是单纯的将已知字段名称的JSON数据通过prop属性填充到页面中，下为官方文档内容

 <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>

其中，表格的key值都是固定的。但是针对key值不固定的json数据的渲染，官方文档并未给出明确信息。最近在写项目的时候涉及到的一项需求就是把后台请求到的json数据渲染到页面，但key值并不固定，导致不能按照官方文档提出的方式进行直接渲染。在网上搜索element表格动态渲染获取到的数据大部分都是复制的官方文档，与本次需求无关。
附上一篇本文参考的文档 https://blog.csdn.net/Ricky110/article/details/78924688
基于文档作者的思路，初次对代码编辑如下

//HTML
<el-table :data="tableList"  v-loading="loading">
        <el-table-column :label="head" v-for="(head, key) in header" :key="head">
            <template slot-scope="scope">
                {{tableList[scope.$index][key]}}
            </template>
        </el-table-column>
</el-table>

                executeSql(sql).then(res => {
                    this.loading = false
                    if(res.status == 'failure') {
                        //...
                    } else {
                        //编辑表头数据
                        this.header = [];
                        for(var i in res.data[0]) {
                            this.header.push(i)
                        }
                        //编辑内容数据
                        for(var i in res.data) {
                            var arr = [];
                            for(var j in res.data[i]) {
                                arr.push(res.data[i][j])
                            }
                            this.tableList.push(arr)
                        }
                    }

基本原理就是获取到JSON数据后分割成表头和内容两部分，动态渲染表头，同时将内容进行填充。
但考虑到方式略有点繁琐，思考后后对代码简化如下

//HTML
<el-table :data="tableList2" v-loading="loading">
        //此处v-for循环仍针对表头 
        <el-table-column :label="key" v-for ="(value,key) in tableList2[0]"  :key="key" >
            <template slot-scope="scope">
                     //填充内容
                    <span>{{scope.row[key]}}</span>
            </template>
        </el-table-column>
</el-table>

                executeSql(sql).then(res => {                   
                    this.loading = false
                    if(res.status == 'failure') {
                        //....
                    } else {
                        //直接复制 在页面进行表头渲染
                        this.tableList2 = res.data
                    }
                })

虽然基本功能可以实现，然而elementui表格宽度自适应以及其提供的诸如排序等功能无法使用，考虑可能是由于仅循环表头导致。由于初次使用Element，能力有限，暂未想到更好的解决办法，所以本文仅供参考。假设有读者能解决刚才提到的排序等问题或者有更好的解决动态渲染表格的办法请及时回复，不胜感激。。。