element ui el-tag 三元表达式多级条件判断

最新推荐文章于 2024-09-05 10:38:34 发布

Hermia_yuan

最新推荐文章于 2024-09-05 10:38:34 发布

阅读量1.8k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/128010159

版权

这篇博客介绍了如何在前端开发中利用条件渲染技术来改变`el-table-column`中的`el-tag`颜色。通过判断标签内容，分别设置为'primary'、'success'或'danger'类型，以及自定义了不同状态的标签颜色。示例代码展示了两种情况：一是判断两个条件以确定标签颜色，二是根据三个条件调整标签样式。此外，还提供了修改`el-tag`默认颜色的CSS代码。

摘要由CSDN通过智能技术生成

判断两个条件

   <el-table-column
      prop="tag"
      label="标签"
      width="100">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>

判断三个条件：

<el-table-column prop="tag" label="处理进度" width="140">
     <template slot-scope="scope">
         <el-tag :type="scope.row.tag === '已处理' ? 'success' : scope.row.tag === '未处理' ? 'danger' : 'warning' " 
            disable-transitions>
            {{ scope.row.tag }}
         </el-tag>
    </template>
</el-table-column>

更改el-tag的默认颜色

  .el-tag.el-tag--success {
    color: rgba(52, 200, 134, 1);
  }
  .el-tag.el-tag--danger {
    color: rgba(255, 105, 107, 1);
  }
  .el-tag.el-tag--warning {
    color: rgba(255, 207, 87, 1);
  }