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

判断两个条件

   <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);
  }