el-table表格el-table-column根据不同得值,动态显示不同的颜色以及不同的文字
在表格里面最常见的就是列状态展示,尤其是2个以上状态展示还要区分不同的颜色。这时候我们就不能用三目运算去判断,我们可以使用JavaScript闭包,进行传值操作例如:在computed里面写入:最后实现就是这样:...
·
在表格里面最常见的就是列状态展示,尤其是2个以上状态展示还要区分不同的颜色。这时候我们就不能用三目运算去判断,我们可以使用JavaScript闭包,进行传值操作
例如:
在computed里面写入:
computed: {
classObje(totalGrade) {
return (totalGrade) => {
if (totalGrade <0){
return {'color':'red'}
} else if (totalGrade === 0){
return {'color':'#000000',}
} else if (totalGrade >0){
return {'color':'#13ce66',}
}
}
}
},
最后实现就是这样:
如果显示不同的值,可以使用 :formatter=“stateFormat”
写入方法判断:
如果后台没有字段,但是需要自定义判断状态:
<el-table-column prop="objectName"
width="150"
label="实际完成时间"
align="center">
<template slot-scope="scope">
<span>
{{getSuccessTime(scope.row)}}
</span>
</template>
</el-table-column>
<el-table-column prop="appraiseName"
label="状态"
:formatter="statFormat"
align="center">
<template slot-scope="scope">
<span :style="classObje(scope.row)">
{{statFormat(scope.row)}}
</span>
</template>
</el-table-column>
methods: {
// 状态判断
statFormat(row) {
let successTime = row.operationType===1? row.examAclTime: row.opAclTime
let palneTime = row.operationTime
if(successTime === null){
return '未完成'
} else {
let Uxsuccess = new Date(successTime).getTime()
let UxPlane = new Date(palneTime).getTime()
if (Uxsuccess > UxPlane){
return '超时完成'
}
if (Uxsuccess < UxPlane){
return '已完成'
}
if (Uxsuccess ===UxPlane){
return '已完成'
}
}
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)