elementui el-table cell-style 给指定的列加属性
根据用户的状态(数字)转成英文。
·
在el-table 加属性:cell-style=“cellStyle”
根据用户的状态(数字)转成英文
<el-table :data="orderfinishinfo" style="width: 100%; font-size: 0.8rem" :cell-style="cellStyle">
<el-table-column label="Status" align="center" prop="status">
<template #default="scope">
{{
scope.row.status == "1"
? "Notstarted"
: scope.row.status == "2"
? "Ongoing"
: scope.row.status == "3"
? "Finish"
: scope.row.status == "4"
? "Rejected"
: scope.row.status == "5"
? "Checking"
: 'Unassigned'
}}
</template>
</el-table-column>
</el-table>
在methods中写入方法,row.row.lossStatus与prop对应,row.column.label与lable对应,返回对应颜色即可
- row.column.label 指定是修改的哪一列
- row.row.status 根据状态(数字) 返回对应的颜色
method:{
cellStyle(row) {
if (row.row.status == 1 && row.column.label == "Status") {
return { color: "#6495ED" };
} else if (row.row.status == 2 && row.column.label == "Status") {
return { color: "#D8BFD8" };
} else if (row.row.status == 3 && row.column.label == "Status") {
return { color: "#008000" };
} else if (row.row.status == 4 && row.column.label == "Status") {
return { color: "#FF0000" };
} else if (row.row.status == 5 && row.column.label == "Status") {
return { color: " #FFFF00" };
} else if (row.row.status == 6 && row.column.label == "Status") {
return { color: "#DCDCDC" };
}
},
效果
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)