element table列表根據(jù)數(shù)據(jù)設(shè)置背景色
更新時(shí)間：2023年08月24日 11:17:03 作者：冷冰染
在使用elementui中的el-table時(shí),需要將表的背景色和字體顏色設(shè)置為新顏色,本文就來介紹一下element table列表根據(jù)數(shù)據(jù)設(shè)置背景色,感興趣的可以了解一下
效果
頁面代碼
通過 :cell-class-name 動(dòng)態(tài)綁定類名
<el-table :data="tableData" style="width: 100%" :cell-class-name="myclass">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>數(shù)據(jù)
tableData: [
{
date: "2023-05-02",
name: "兔子先森",
address: "上海市普陀區(qū)金沙江路 1518 弄",
isShow: 1,
},
{
date: "2023-05-04",
name: "兔子先森",
address: "上海市普陀區(qū)金沙江路 1517 弄",
isShow: 1,
},
{
date: "2023-05-01",
name: "兔子先森",
address: "上海市普陀區(qū)金沙江路 1519 弄",
isShow: 0,
},
{
date: "2023-05-03",
name: "兔子先森",
address: "上海市普陀區(qū)金沙江路 1516 弄",
isShow: 2,
},
],js方法
直接寫到 methods 中，列表綁定即可，不需要放到生命周期中。
// 修改單元格樣式的方法
myclass({ row, column, rowIndex, columnIndex }) {
// row當(dāng)前行，column表格列，rowIndex表格的第幾行，columnIndex第幾個(gè)格子
// 根據(jù)當(dāng)前行的參數(shù)判斷，修改當(dāng)前行樣式
if (row.isShow == 0) {
return "setclass";
} else if (row.isShow == 2) {
return "setSuccess";
}
// 還可以設(shè)置對(duì)應(yīng)單元格顏色
// 表格的第二行-起始下標(biāo)0
if (rowIndex === 1) {
// 第二行下標(biāo)為1的格子
if (columnIndex == 1) {
return "setHeight";
}
}
},css部分
不能使用 scope 作用域，否則背景色不生效
<style lang='scss'>
.setclass {
background: yellow !important;
color: red !important;
}
.setSuccess {
background: green !important;
color: white !important;
}
.setHeight {
color: blue !important;
}
</style>動(dòng)態(tài)刷新列表數(shù)據(jù)關(guān)聯(lián)列表背景色
當(dāng)列表數(shù)據(jù)更改時(shí)，我們需要根據(jù)列表數(shù)據(jù)來動(dòng)態(tài)判斷列表是否高亮提示，此時(shí)只需要更改列表數(shù)據(jù)即可，列表重載數(shù)據(jù)會(huì)再次動(dòng)態(tài)刷新，不需要調(diào)用任何方法。
// 數(shù)據(jù)未上述列表數(shù)據(jù)
isDanger() {
this.tableData.forEach((el,index) => {
if(index % 2 == 0){
el.isShow = 0
}else {
el.isShow = 2
}
});
}
相關(guān)文章
vue實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出操作示例
這篇文章主要為大家介紹了vue實(shí)現(xiàn)excel文件的導(dǎo)入導(dǎo)出實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue3使用vuedraggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn)
本文主要介紹了Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權(quán)限,提高系統(tǒng)的安全性和用戶體驗(yàn),感興趣的可以了解一下2025-04-04
vue3頁面跳轉(zhuǎn)傳值時(shí)獲取不到params值的問題解決
在Vue3頁面跳轉(zhuǎn)時(shí)傳遞和獲取參數(shù)通常通過路由參數(shù)和查詢字符串實(shí)現(xiàn),本文主要介紹了vue3頁面跳轉(zhuǎn)傳值時(shí)獲取不到params值的問題解決,感興趣的可以了解一下2024-11-11
vue移動(dòng)端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了vue移動(dòng)端使用appClound拉起支付寶支付的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue如何設(shè)置定時(shí)器和清理定時(shí)器
這篇文章主要介紹了vue如何設(shè)置定時(shí)器和清理定時(shí)器，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue進(jìn)入頁面時(shí)滾動(dòng)條始終在底部代碼實(shí)例
這篇文章主要介紹了vue進(jìn)入頁面時(shí)滾動(dòng)條始終在底部，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue頁面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法
百度了好久都沒辦法實(shí)現(xiàn)vue中一個(gè)頁面跳到另一個(gè)頁面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁面跳轉(zhuǎn)動(dòng)畫效果的實(shí)現(xiàn)方法，需要的朋友可以參考下2018-09-09