通過header插槽自定義表頭：

<template slot="header" slot-scope="scope">... </template>

可以通過scope.row.columnName 獲取單元項數據進行數據處理：

<template slot-scope="scope"><span :class="1<2 ? 'red-font' : 'blue-font' ">{{formatDate(scope.row.temperature)}} ℃</span> </template>

如圖：

<el-table :data="currentCabinData"style="width: 100%" stripe border height="100"><el-table-column prop="name"label="設備倉" fixed></el-table-column><el-table-column prop="temperature" ><!-- 表頭項 --><template slot="header"slot-scope="scope"><span class="mgrinr1">溫度</span><d2-icon name="thermometer-2"style="font-size: 18px;" /></template><!-- 行數據項 --> <template slot-scope="scope">{{ scope.row.temperature }} <!-- scope.row.prop --> <span v-show="scope.row.temperature"class="unit-color">℃</span></template></el-table-column><el-table-column prop="humidity"><template slot="header"slot-scope="scope"><span class="mgrinr1">濕度</span><d2-icon name="tint"style="font-size: 18px;" /></template><template slot-scope="scope">{{ scope.row.humidity }}<span v-show="scope.row.humidity"class="unit-color">%</span></template></el-table-column></el-table>

上述el-table中關鍵字可以實現border縱向邊框、stripe斑馬線、固定表頭或表列、多級表頭、最小表高度、行單選、多選、數據過濾、展開行數據、樹形數據懶加載、自定義表頭、行尾統計、合并行或列等效果

?

?

使用header-cell-style屬性修改表頭樣式，可為函數或對象：

使用cell-style屬性更改表格中某個單元格的樣式，可為函數或對象：

<!-- html --> <el-table :header-cell-style="rowClass" :cell-style="cellStyle"> </el-table> //在method里面寫上方法 cellStyle({row, column, rowIndex, columnIndex}){if(rowIndex === 1 && columnIndex === 2){ //指定坐標return 'background:pink'}else{return ''} }

?

?

?

?

總結

以上是生活随笔為你收集整理的el-table表格在表头和数据行添加图标、处理数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。