在项目中遇到需要后端返回高中低所对应的表头,根据风险等级1,2,3来展示不同的颜色。
<Table :columns="columns" :data="tableData" />
<script>
...
...
//从后端获取到数据
this.columns.map(item => {
if (item.riskGrade === '1') {
item.className = "highColor"
} else if (item.riskGrade === '2') {
item.className = "middleColor"
} else if (item.riskGrade === '3') {
item.className = "lowColor"
}
})
</script>
<style lang="less" scoped>
/deep/.ivu-table-wrapper .ivu-table .ivu-table-header tr th.highColor {
color: #ed4014 !important;
}
/deep/.ivu-table-wrapper .ivu-table .ivu-table-header tr th.middleColor {
color: #ff9900 !important;
}
/deep/.ivu-table-wrapper .ivu-table .ivu-table-header tr th.lowColor {
color: #19be6b !important;
}
</style>