1.效果图

 2.html

<el-table-column label="结果" prop="patrolSchemeResults"  align="center">
   <template slot-scope="scope" >
                  
         <el-tag :class="{ selectStyle:scope.row.patrolSchemeResults == '/'}"
                 :type="scope.row.patrolSchemeResults === '异常' ? 'danger' 
                 :scope.row.patrolSchemeResults === '正常'?'success':'' "
                 disable-transitions>{{scope.row.patrolSchemeResults}}
          </el-tag>
    </template>
</el-table-column>
  • 若是不需要设置标签则需要自己重新定义样式( :class="{ selectStyle : scope . row . patrolSchemeResults == '/'}" )
  • 注意:自定义标签背景颜色(只有主题为 sffect = " dark " 的时候才可以自定义颜色,

     /* 自定义标签背景 */
      .el-tag--dark.el-tag--danger {
        background-color: #e94646 !important;
      }
    
      .el-tag--dark.el-tag--warning {
        background-color: #d7a14f !important;
      }
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐