el-table横向纵向渲染
横向纵向渲染需要两类数组,一类渲染表头,另外一类需要渲染内容,表头数组每一个对象需要塞入两个值 一个为表头渲染的内容即绑定label 另外一个为该纵列值所在字段名即绑定prop
<el-tableref="refreshTable"v-loading="loading":data="listData":header-cell-style="{ background: '#007F69', color: '#fff' }"highlight-current-row><el-table-columnfixedwidth="170px"label="测点"align="center"prop="测站名称"/><el-table-column label="降雨日期(mm)" align="center"><template v-for="(item, index) in dataList"><el-table-columnalign="center":prop="item.name":label="item.house":key="index"v-if="item.name != 'id'"></el-table-column></template></el-table-column></el-table>
dataList:[{name: "-12-01",house: "01",},{name: "-12-02",house: "02",},{name: "-12-03",house: "03",}],listData:[{测站名称:"1#站点"-12-01:4266.7,-12-02:3574.9,-12-03:4313.3},{测站名称:"2#站点"-12-13:4266.7,-12-14:3574.9,-12-15:4313.3},{测站名称:"3#站点"-12-01:4266.7,-12-02:3574.9,-12-03:4313.3}]
页面错乱问题由于数据不断刷新,未及时渲染dom所导致,故在两组数组对象接受完毕之后通过ref绑定及时刷新即可
this.$nextTick(() => {this.$refs.refreshTable.doLayout();});
elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错乱表格偏移问题