element中el-table表頭通過header-row-style設(shè)置樣式
更新時(shí)間：2024年01月15日 10:50:35 作者：小馬甲丫
有些時(shí)候需要給element-ui表頭設(shè)置不同樣式,本文主要介紹了element中el-table表頭通過header-row-style設(shè)置樣式,具有一定的參考價(jià)值,感興趣的可以了解一下
一、知識(shí)點(diǎn)
有些時(shí)候需要給element-ui表頭設(shè)置不同樣式，比如居中、背景色、字體大小等等，這時(shí)就可以用到本文要說的屬性header-row-style。官網(wǎng)說明如下所示：
二、設(shè)置全部表頭
2.1、方式一
<el-table :header-cell-style="{'text-align': 'center'}" />
2.2、方式二
<template>
<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
methods: {
tableHeaderColor ({row, column, rowIndex, columnIndex}) {
return 'text-align: center;'
}
}
}
</script>
三、設(shè)置某個(gè)表頭
<template>
<el-table :header-cell-style="tableHeaderColor" />
</template>
<script>
export default {
methods: {
// 設(shè)置表頭的顏色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
console.log(row, column, rowIndex, columnIndex);
if (rowIndex === 0 && columnIndex === 1) {
return 'background-color: #afccfd; color:#000000;'; //藍(lán)色
} else if (rowIndex === 0 && columnIndex === 2) {
return 'background-color: #c0e33c; color:#000000;';//綠色
} else if (rowIndex === 0 && columnIndex === 3) {
return 'background-color: #fbc57b; color:#000000;';//橙色
} else {
return 'color:#000000; background: #ffffff;';
}
}
}
}
</script>
效果如下所示：
四、最后
到此這篇關(guān)于element中el-table表頭通過header-row-style設(shè)置樣式的文章就介紹到這了,更多相關(guān)element header-row-style設(shè)置樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element-ui?table表格底部合計(jì)自定義配置過程
這篇文章主要介紹了element-ui?table表格底部合計(jì)自定義配置過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue利用遞歸組件實(shí)現(xiàn)嵌套回復(fù)功能
這篇文章主要為大家詳細(xì)介紹了Vue如何利用遞歸組件實(shí)現(xiàn)嵌套回復(fù)功能,文章的示例代碼講解詳細(xì),如果你也在獨(dú)立做全棧項(xiàng)目,希望這些經(jīng)驗(yàn)?zāi)軒湍闵俨葞讉€(gè)坑2026-05-05
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
express+vue+mongodb+session 實(shí)現(xiàn)注冊(cè)登錄功能
這篇文章主要介紹了express+vue+mongodb+session 實(shí)現(xiàn)注冊(cè)登錄,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
Arco Design 作為一款專為 Vue3 打造的企業(yè)級(jí) UI 組件庫,以其豐富的特性和卓越的性能,成為現(xiàn)代 Web 應(yīng)用開發(fā)者值得關(guān)注的選擇,這篇文章主要介紹了Vue3 框架Arco Design詳解,需要的朋友可以參考下2024-08-08
vue2.0+elementui實(shí)現(xiàn)一個(gè)上門取件時(shí)間組件
這篇文章主要給大家介紹了關(guān)于vue2.0+elementui實(shí)現(xiàn)一個(gè)上門取件時(shí)間組件的相關(guān)資料,用于預(yù)約上門服務(wù)時(shí)間 看到網(wǎng)上有很多亂七八糟的代碼,看著頭疼,于是自己寫了一個(gè)簡(jiǎn)單的,需要的朋友可以參考下2024-02-02
vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問題(get、post、put、delete)
這篇文章主要介紹了vue3實(shí)戰(zhàn)-axios請(qǐng)求封裝問題(get、post、put、delete)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3中使用Element?Plus時(shí)el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時(shí)el-icon無法顯示的問題解決,需要的朋友可以參考下2022-03-03
使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件
這篇文章主要為大家詳細(xì)介紹了使用Vue3封裝實(shí)現(xiàn)支持Base64導(dǎo)出的電子簽名組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2025-03-03
Vue3+Vite實(shí)現(xiàn)根據(jù)用戶權(quán)限的動(dòng)態(tài)路由
在現(xiàn)代前端開發(fā)中,單頁面應(yīng)用（SPA）越來越受到開發(fā)者的青睞,而 Vue.js 作為其中的一個(gè)流行框架,提供了豐富的功能來構(gòu)建用戶界面,本文將通過一個(gè)基于 Vite + Vue 3 的項(xiàng)目示例,詳細(xì)介紹如何實(shí)現(xiàn)動(dòng)態(tài)路由,有需要的可以參考下2025-10-10