vue table表格頭部設定樣式(header-cell-style/header-cell-class-name)
阿新 • • 發佈：2021-02-16
技術標籤：vue
vue中表格的頭部更改掌握這兩種方法想改哪個地方都能改
- header-cell-style這種方式可以直接
ruturn "color: #fff;background:#00bfbf" - header-cell-class-name這種只是返回一個
class
至於為什麼，直接上程式碼
HTML示例
<el-table :data="formData.bomList"
@selection-change="handleSelectionChange"
id="table-form" 圖片示例
1.header-cell-style
tableHeaderCellStyle({row,column,rowIndex, columnIndex}) {
let cellStyle1;
let cellStyle2;
let cellStyle3;
cellStyle1= "color: #fff;background:#027db4"
cellStyle2= "color: #fff;background:#70b603"
cellStyle3= "color: #fff;background:#00bfbf"
if(columnIndex >= 0 && columnIndex < 9 && rowIndex===1){
return cellStyle1;
}
if(columnIndex > 8 && columnIndex < 18 && rowIndex===1){
return cellStyle2;
}
if(columnIndex === 18 && rowIndex===1){
return cellStyle3;
}
},
2.header-cell-class-name
headerRowStyle(obj){
if(obj.column.type=="selection"){
return 'ddxxys';
}
if(obj.column.label=="訂單資訊"){
return 'ddxxys';
}
if(obj.column.label=="備料資訊"){
return 'blxxys';
}
if(obj.column.label=="排配資訊"){
return 'ppxxys';
}
if(obj.column.label=="操作"){
return 'czanys';
}
},
<style>
.ddxxys {
background: #027db4 !important;
color: #fff !important;
}
.blxxys {
background: #70b603 !important;
color: #fff !important;
}
.ppxxys {
background: #00bfbf !important;
color: #fff !important;
}
.czanys {
background: #02a7f0 !important;
color: #fff !important;
}
</style>
遇到的坑
- 可以看到通過這兩種方式都能夠獲取到column，一個新增的是class一個是直接的樣式
- 如果你試著想通過elements找到標籤上的class去設定樣式，你會發現樣式設定上去了，但是你點選另一個的表格，再回來就會發現class已經變了
- 千萬不要使用column的id去做判斷，這個id是會改變的
結語
本文就分享到這，希望對你有幫助