element ui 动态显示表格表头

<el-table:data="table_content"borderstripe><el-table-columntype="index"label="序号"width="80"></el-table-column><el-table-column:label="val"v-for="(val, i) in table_head":key="i"><templateslot-scope="scope"> {{ table_content[scope.$index][i] }}</template></el-table-column><el-table-columnlabel="操作"min-width="160"fixed="right"><templateslot-scope="scope"><el-buttontype="text"size="mini"@click="handleDeatils(scope.row)">详情</el-button><el-buttontype="text"size="mini"@click="handleDel(scope.row)">删除</el-button></template></el-table-column></el-table><el-dialogtitle="详情":visible.sync="isShow"width="600px"><el-form:model="dynamicForm"ref="dynamicForm"label-width="100px"><el-form-itemv-for="(value, index) in dynamicFormItems":key="index":label="table_head[index]":prop="`fields.${index}`"><divv-if="index < dynamicFormItems.length - 1"><el-inputv-model="dynamicForm.fields[index]"placeholder="请输入内容"></el-input></div></el-form-item></el-form></el-dialog>

data(){return{dynamicForm:{},dynamicFormItems:[],isShow:false,table_head:[],table_content:[],listData:[{id:1,data:{姓名:"张三",出生日期:"2006-07-23",年龄:"12",性别:"男"}},{id:2,data:{姓名:"李四",出生日期:"2004-07-23",年龄:"19",性别:"男"}}]}}onList(){if(this.listData.length >0){const firstRecordData =this.listData[0].data;this.table_head =[];for(let key in firstRecordData){if(firstRecordData.hasOwnProperty(key)){// 确保是对象的自有属性  this.table_head.push(key);}}this.table_content =[];this.listData.forEach(item=>{let arr =[];const recordData = item.data;// 遍历记录数据的每个键，并将对应的值添加到数组中  this.table_head.forEach(subItem=>{if(recordData.hasOwnProperty(subItem)){// 确保键存在于当前记录中  
           arr.push(recordData[subItem]);}else{// 如果当前记录中不存在该键，可以选择添加null、undefined或其他默认值  
           arr.push(null);}});
       arr.push(item.id);// 将每行的id添加到最后一位，方便操作// 将处理后的数组（一行数据）添加到表格内容中  this.table_content.push(arr);});}}handleDel(data){
    console.log('id=',data[data.length -1])},handleDeatils(data){this.dynamicFormItems = data
 this.dynamicForm.fields = data.map(item=> item);this.isShow =true},

效果图