element ui 动态显示表格表头

空空

已于 2024-07-27 21:38:39 修改

阅读量183

点赞数 2

文章标签： ui javascript 开发语言

于 2024-07-26 13:33:53 首次发布

本文链接：https://blog.csdn.net/weixin_56119955/article/details/140713045

版权

<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="handleDetail(scope.row)">详情</el-button>
	     <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
	   </template>
	 </el-table-column>
</el-table>

data(){
	return {
		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])
}