element ui动态渲染行数据

记一下如果后端返回

          table:[

                    {name:'1',list:[
                            {name:'111'},
                            {name:'222'},
                            {name:'333'},
                            {name:'444'},
                            {name:'5555'}
                        ]},
                    {name:'2',list:[
                            {name:'111'},
                            {name:'222'},
                            {name:'444'}
                        ]},
                    {name:'111',list:[
                            {name:'111'},
                            {name:'222'},
                            {name:'333'},
                            {name:'444'}
                        ]},  {name:'111',list:[
                            {name:'111'},
                            {name:'222'},
                            {name:'333'},
                            {name:'444'}
                        ]},

                ]

这种数据的话，前端使用element ui怎么渲染
因为后端返回的数据是数组套数组，最外层的对象是每列展示的数据，每个数组中的list树形为每行展示的数据
在中，有一个data他绑定的数组中，有多少个对象，这个表格就渲染多少行，所以我们拿到后端绑定的数组，进行遍历，将这些数组中，谁的list长度最长，拿到，赋值到:data绑定值上，这样的话最大行就拿到了，然后再中循环通过行的index和列的index来对应展示就很好了

   <el-table
                    :data="table[0].list"
                    style="width: 100%"
                >


                    <el-table-column
                        :label="item.name"
                        prop=""
                        v-for="(item,index) in table"
                        :key="index"
                        width="180">
                       <template slot-scope="scope">
              <div v-if=" table[index].list[scope.$index]">
                  {{table[index].list[scope.$index].name}}
              </div>
                           <div v-else>没有数据</div>
                       </template>
                    </el-table-column>


                </el-table>