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