ElementUI中el-table根据后端接口传递过来的数字状态、显示不同文字、不同颜色

叠码猿

已于 2024-01-03 10:33:20 修改

阅读量1.4k

点赞数 3

文章标签： elementui 数学建模前端 javascript

于 2023-06-21 11:17:20 首次发布

本文链接：https://blog.csdn.net/lyq1948/article/details/131323559

版权

简要讲解：根据在表格列的scoped-slot中，使用:class来绑定对应的类名赋值颜色和内容方法赋值主要代码：<div :class="binClass(status)">{{ binConter(status) }}</div>

样式展示：

代码展示 html:

以在CSS样式中使用多个类名来设置不同状态下的边框颜色跟不同状态的不同内容，然后在表格列的scoped-slot中根据不同状态的值来绑定对应的类名

<el-table-column label="状态" prop="status">
  <template slot-scope="{ row }">
     <div :class="binClass(row.status)">{{ binConter(row.status) }}</div>
  </template>
</el-table-column>

methods处理： binClass返回不同的状态内容 binConter返回不同的class名称

methods: {
    binConter(v){
      //状态(0:草稿，1:未评估，2：已评估,3-申诉失败;4-申诉成功；)
       switch (v) {
          case 0:
            return '草稿';
          case 1:
            return '未评估';
          case 2:
            return '已评估';
          case 3:
            return '申诉失败';
          case 4:
            return '申诉成功';
          default:
            return '';
        }   
    } 
     //颜色
    binClass(v){
      switch (v) {
          case 0:
            return 'tagblue1';
          case 1:
            return 'tagblue2';
          case 2:
            return 'tagblue3';
          case 3:
            return 'tagblue4';
          case 4:
            return 'tagblue5';
          default:
            return '';
        }     
     }
}

不同状态展示不同颜色：

<style>
tagblue1 {
  border-radius: 12px;
  background-color: #F0F3FF;
  border: 1px solid #3A65FF;
  color: #3A65FF;
}
.tagblue2 {
  border-radius: 12px;
  background: #E8F8F3;
  border: 1px solid #21BD88;
  color: #21BD88;
}
.tagblue3 {
  border-radius: 12px;
  background-color: #F0F3FF;
  border: 1px solid #3A65FF;
  color: #3A65FF;
}
.tagblue4 {
  border-radius: 12px;
  background: #E8F8F3;
  border: 1px solid #FAA755;
  color: #FAA755;
}

</style>

以上则是在Element UI表格中实现不同状态下内容边框不同颜色不同的效果（主要还是要以实际需求更改）。