element ui 动态显示表格表头

<el-table :data="table_content" border stripe>
	<el-table-column type="index" label="序号" width="80"></el-table-column>
	 <el-table-column :label="val" v-for="(val, i) in table_head" :key="i">
	   <template slot-scope="scope"> {{ table_content[scope.$index][i] }}</template>
	 </el-table-column>
	 <el-table-column label="操作" min-width="160" fixed="right">
	   <template slot-scope="scope">
	     <el-button type="text" size="mini" @click="handleDeatils(scope.row)">详情</el-button>
	     <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
	   </template>
	 </el-table-column>
</el-table>
 <el-dialog title="详情" :visible.sync="isShow" width="600px">
<el-form :model="dynamicForm" ref="dynamicForm" label-width="100px">
        <el-form-item v-for="(value, index) in dynamicFormItems" :key="index" :label="table_head[index]"
          :prop="`fields.${index}`">
          <div v-if="index < dynamicFormItems.length - 1">
            <el-input v-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
},

效果图