vue中自动生成表头再根据表头与内容对应填充动态生成表格的两个方法

1、第一种：Vue 1.0，常规的table表格

 <template>
          <thead>
	      <tr>												                                               	
                <th type="selection" width="45px" ></th>   //序号框
		  <th v-for='col in AtableData' :prop="col.TypeID" :key="TypeID" >{{col.Type}}</th>   //获取表头
	      </tr>
	 </thead>
	<tbody class="data-tbody" id="tbody">
            <tr v-for='item in list'>
         	<td>
		   <input type="checkbox" name="checked" v-bind:id="item.ClassID">
	      </td>
              <td v-for='it in AtableData'>{{item[it.TypeID]}}</td>   //根据表头的id来获取表格内容
                  </tr>
	 </tbody>	
	 </template>
	   <script>里面写上：
	   export default {
		name: 'HelloWorld',
		data() {
			return {    
			        AtableData:[], //初始化列表头                 
                            list:[],//初始化列内容
                           }
			}
	   methods: {
			getData() {
			var schoolId="";
				if(this.IsAllDesk != 2 || this.IsAllDesk != "2") {
					schoolId =$("#school").val();
				}
				/*接口请求*/
				this.$http.post(this.GLOBAL.serverSrc+'/DeskChair/DeskConfig/Statistic', {"SchoolID": schoolId}{
					header: {},
					emulateJSON: true
				}).then((res) => {
					//console.info(res);
					if(res.body.code == "0") {
						if(res.body.result.length > 0 && res.body.result != "结果为空") {
							this.AtableData=res.body.tableTitle;
							this.list = res.body.result;   //后台返回的数组（包括表头和表内容，）
							setTimeout(function() {
								this.selectChange();
							}.bind(this), 2)
							//console.info(this.list);
							this.warnMessage = "操作成功";
							this.colorMessage = "green"
						} else {
							this.list = [];
							this.warnMessage = "暂无数据";
							this.colorMessage = "red"
						}
					} else {
						this.warnMessage = "获取数据失败";
						this.colorMessage = "red"
					}
				}).catch(err => {
					this.warnMessage = "访问接口失败";
					this.colorMessage = "red"
				})
			}
			}
		    }

	   后台先返回表头的json数组如下格式：需返回tableTile表头的列名及列名id,然后result即表格内容需要与列id关联，从而来填充表格内容  

2、利用element来动态生成表格（相对而言第一种而言这个比较简单方便)

<el-table class="table data-table" :data="Atables.slice((currentPage-1)*pagesize,currentPage*pagesize)" ref="multipleTable" tooltip-effect="dark" style="border:1;width: 100%;" @selection-change='selectArInfo' >																				
	<el-table-column type="selection" width="7px" ></el-table-column>
	<el-table-column class="data-order" label="序号" width="50px" type="index"></el-table-column>
      <template v-for='(col,index) in list'>                                        
          <el-table-column sortable :show-overflow-tooltip="true" :prop="col.TypeID" :label="col.Type" :key="col.TypeID" width="100px"> 
         </el-table-column>                                         
      </template>                                       
   </el-table>
<script>
export default {
		name: 'HelloWorld',
		data() {
			return {  
			（第一种方式直接在这里把数据写死的，不需要调用下面的methods方法）
			   Atables: [{
                       name: '福兰',
                       Type0: '0号',
                      Type1: '1号',
                      Type2: '2号',
                      Type3: '3号',
                    }, {
                     name: '福特',
                       Type0: '0号',
                      Type1: '1号',
                      Type2: '2号',
                      Type3: '3号',
                      Type4: '4号',                
           }],
          list: [{
               TypeID: 'name',
               Name: '某某'
        }, {
              TypeID: 'Type0',
               Name: '0号'
        }, {
           TypeID: 'Type1',
               Name: '1号'
        }, {
          TypeID: 'Type2',
               Name: '2号'
        }, {
           TypeID: 'Type3',
               Name: '3号'
        }]
       （ 第二种方式调用后台返回数据的（下面的methods方法是这里调用的））
	                     Atables:[], //初始化列表头                 
                            list:[],//初始化列内容                         
                           }
			}
	   methods: {
	              //表格内容
			getData() {
			var schoolId="";
				/*接口请求*/
				this.$http.post(this.GLOBAL.serverSrc+'/DeskChair/DeskConfig/Statistic', {"SchoolID": schoolId}{
					header: {},
					emulateJSON: true
				}).then((res) => {
					//console.info(res);
					if(res.body.code == "0") {
						if(res.body.result.length > 0 && res.body.result != "结果为空") {
							this.AtableData=res.body.tableTitle;
							this.list = res.body.result;   //后台返回的数组（包括表头和表内容，）
							setTimeout(function() {
								this.selectChange();
							}.bind(this), 2)
							//console.info(this.list);
							this.warnMessage = "操作成功";
							this.colorMessage = "green"
						} else {
							this.list = [];
							this.warnMessage = "暂无数据";
							this.colorMessage = "red"
						}
					} else {
						this.warnMessage = "获取数据失败";
						this.colorMessage = "red"
					}
				}).catch(err => {
					this.warnMessage = "访问接口失败";
					this.colorMessage = "red"
				})
			}
			}
		    }
</script>