iview 表格表头根据高中低风险显示颜色

小橘子皮__兜兜

已于 2022-11-09 16:42:41 修改

阅读量437

点赞数

文章标签： view design 前端 javascript

于 2022-11-09 15:17:08 首次发布

本文链接：https://blog.csdn.net/weixin_43657954/article/details/127770428

版权

在项目中遇到需要后端返回高中低所对应的表头，根据风险等级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>