el-table实现动态表头-编程知识

el-table实现动态表头

1.1el-table渲染

<el-tableref="refreshTable":data="tableData"highlight-current-row><el-table-columnfixedwidth="170px"label="测点"align="center"prop="测站名称"/><el-table-column label="降雨日期(mm)" align="center"><template v-for="(item, index) in headList"><el-table-column:key="index":prop="item.name":label="item.house"align="center"></el-table-column></template></el-table-column></el-table>

1.2.数据格式：

headList:[{name: "2021-12-01",house: "01",},{name: "2021-12-02",house: "02",},{name: "2021-12-03",house: "03",}],tableData:[{测站名称:"1#站点",'2021-12-01':4266.7,'2021-12-02':3574.9,'2021-12-03':4313.3},{测站名称:"2#站点",'2021-12-01':4266.7,'2021-12-02':3574.9,'2021-12-03':4313.3},{测站名称:"3#站点",'2021-12-01':4266.7,'2021-12-02':3574.9,'2021-12-03':4313.3}]

1.3.界面展示
在这里插入图片描述

2.1 el-table渲染

<el-table border :data="listData"><el-table-columnfixedwidth="170px"label="部门"align="center"prop="dept"/><template v-for="(item,index) in dataList"><el-table-column:key="index":label="item.time"align="center"><el-table-column:prop="item.name"label="姓名"width="120"align="center"></el-table-column><el-table-column:prop="item.tel"label="电话"width="120"align="center"></el-table-column></el-table-column></template></el-table>```2.2 数据```javascript
dataList:[{time: "2021-12-01",name: "n1",tel: "t1",},{time: "2021-12-02",name: "n2",tel: "t2",},{time: "2021-12-03",name: "n3",tel: "t3",},],listData:[{dept:"综合管理部",'n1':'张三','n2':'李四','n3':'王五','t1':4266.7,'t2':3574.9,'t3':4313.3},{dept:"生产经营部",'n1':'张三','n2':'李四','n3':'王五','t1':4266.7,'t2':3574.9,'t3':4313.3},{dept:"炼油一部",'n1':'张三','n2':'李四','n3':'王五','t1':4266.7,'t2':3574.9,'t3':4313.3}],