element?plus如何為表格某列數(shù)據(jù)文字設置顏色樣式
更新時間：2023年10月17日 11:16:09 作者：燕哥學前端
實習工作需要根據(jù)表格的狀態(tài)字段來設置列的樣式,所以這篇文章主要給大家介紹了關于element?plus如何為表格某列數(shù)據(jù)文字設置顏色樣式的相關資料,需要的朋友可以參考下
有時候業(yè)務需要，需要將表格里的數(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" };
}
}
總結
到此這篇關于element plus如何為表格某列數(shù)據(jù)文字設置顏色樣式的文章就介紹到這了,更多相關elementplus表格列數(shù)據(jù)設置顏色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了VUE項目自動檢測服務端是否發(fā)布了新版本,通過輪詢方式檢測Vue項目新版本并提示用戶刷新頁面,具有一定的參考價值,感興趣的可以了解一下2025-01-01
本文將詳細介紹通過Vue使多元素進行過渡動畫,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了關于vue的列表圖片選中打鉤操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
大家在寫系統(tǒng)的時候,會有這樣的需求：點擊修改后把需要修改的數(shù)據(jù)放入表單,其中會有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧2024-03-03
混入（Mixin）是?Vue?中一種代碼復用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
vue elementui 實現(xiàn)搜索欄公共組件封裝的實例代碼
這篇文章主要介紹了vue elementui 搜索欄公共組件封裝,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue百度地圖maker標注的添加和刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關于vue3.0+element表格獲取每行數(shù)據(jù)的相關資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09
vue.nextTick()與setTimeout的區(qū)別及說明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03