element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
更新時(shí)間：2023年10月17日 11:16:09 作者：燕哥學(xué)前端
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下
有時(shí)候業(yè)務(wù)需要，需要將表格里的數(shù)據(jù)換上不同顏色的樣式，以便查看，查看官方文檔，有一個(gè)屬性可以修改表格的樣式
話不多說，放代碼：
<el-table ref="multipleTableRef"
:data="tableData"
style="width: 100%"
@selection-change="selectionChange"
:cell-style="cellStyle"
>
...
<el-table-column property="type" label="一級(jí)分類">
</el-table-column>
<el-table-column property="classify" label="二級(jí)分類"/>
...
<el-table-column property="standardState" label="標(biāo)準(zhǔn)狀態(tài)"/>
</el-table>
js：
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
// 狀態(tài)列字體顏色
// columnIndex 列下標(biāo)
// rowIndex 行下標(biāo)
// row 行
// column 列
if (row.type !=null && columnIndex === 3) {
return { color: "#189EFF" };
}else if (row.classify != null && columnIndex === 4) {
return { color: "#189EFF" };
} else if (row.standardState =='現(xiàn)行' && columnIndex === 6) {
return { color: "#1CD66C" };
} else if (row.standardState == '即將實(shí)施' && columnIndex === 6) {
return { color: "#189EFF" };
} else if (row.standardState == '廢止' && columnIndex === 6) {
return { color: "red" };
}
}
總結(jié)
到此這篇關(guān)于element plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的文章就介紹到這了,更多相關(guān)elementplus表格列數(shù)據(jù)設(shè)置顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue的列表之渲染,排序,過濾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue注冊(cè)組件有這幾種，分別是全局注冊(cè)、局部注冊(cè)、在模塊系統(tǒng)中注冊(cè)，這篇文章主要介紹了Vue注冊(cè)組件的方法,需要的朋友可以參考下2022-08-08
vue.js?el-table虛擬滾動(dòng)完整實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于el-table虛擬滾動(dòng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
vue關(guān)于接口請(qǐng)求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題
這篇文章主要介紹了vue關(guān)于接口請(qǐng)求數(shù)據(jù)過大導(dǎo)致瀏覽器崩潰的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下2024-03-03
ElementUI對(duì)table的指定列進(jìn)行合算
本文主要介紹了ElementUI對(duì)table的指定列進(jìn)行合算，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue項(xiàng)目打包后部署到服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue項(xiàng)目打包后部署到服務(wù)器,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
以前vue項(xiàng)目中也有很多實(shí)現(xiàn)動(dòng)態(tài)路由的方法,比如有一些項(xiàng)目涉及權(quán)限的可能會(huì)使用api請(qǐng)求路由數(shù)據(jù)在來createRouter,或者本地構(gòu)建使用routes.push來動(dòng)態(tài)構(gòu)建路由, 今天介紹一種新的方式來基于某個(gè)文件夾批量構(gòu)建動(dòng)態(tài)路由的方法,感興趣的朋友一起看看吧2024-12-12
有的時(shí)候項(xiàng)目需要在頁面使用快捷鍵，而且需要對(duì)快捷鍵進(jìn)行維護(hù)。本文將為大家展示Vue實(shí)現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下2022-04-04