100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错

elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错

时间:2018-08-13 04:23:49

相关推荐

elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错

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定位位置错乱表格偏移问题

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。