el-table橫向縱向渲染

橫向縱向渲染需要兩類數(shù)組，一類渲染表頭，另外一類需要渲染內(nèi)容，表頭數(shù)組每一個對象需要塞入兩個值 一個為表頭渲染的內(nèi)容即綁定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="測點(diǎn)"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: "2021-12-01",house: "01",},{name: "2021-12-02",house: "02",},{name: "2021-12-03",house: "03",}], listData:[{測站名稱:"1#站點(diǎn)"2021-12-01:4266.7,2021-12-02:3574.9,2021-12-03:4313.3},{測站名稱:"2#站點(diǎn)"2021-12-13:4266.7,2021-12-14:3574.9,2021-12-15:4313.3},{測站名稱:"3#站點(diǎn)"2021-12-01:4266.7,2021-12-02:3574.9,2021-12-03:4313.3}]

頁面錯亂問題由于數(shù)據(jù)不斷刷新，未及時渲染dom所導(dǎo)致，故在兩組數(shù)組對象接受完畢之后通過ref綁定及時刷新即可

this.$nextTick(() => {this.$refs.refreshTable.doLayout();});

總結(jié)

以上是生活随笔為你收集整理的elementui中 el-table表格表头以及内容渲染(横向纵向渲染)以及固定列fixed定位位置错乱表格偏移问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。