标签：el style index 50 showingDetail scope sStatus row

先记录一下，占坑

z-index问题

z-index

首先，生效有很多有bfc就可以

其次，冲突是因为父级元素有谁设置了一个可以形成z-index的，把子元素的给覆盖掉了，才导致本来很高的子元素z-index去和别人比较的时候冲突了

调试的时候应该

在父元素从外往里，设置z-index，哪里能覆盖了header就是哪里的问题，然后二分。。。~

（父元素从里往外，此外要加position absolute 因为要生效。。）

不如el-tag来的方便，zh说比较倾向于，type是个props，style不一样

可以用函数或者computed处理

:style="{color:getXXXX(scope.row.)}

 <el-tag
            :type="
              showingDetail.sStatus == '50'
                ? 'danger'
                : showingDetail.sStatus == '0'
                ? 'warning'
                : showingDetail.sStatus == '100'
                ? 'success'
                : 'info'
            "
            disable-transitions
            >{{
              showingDetail.sStatus == "0"
                ? "待审核"
                : showingDetail.sStatus == "50"
                ? "已拒绝"
                : showingDetail.sStatus == "30"
                ? "已撤销"
                : showingDetail.sStatus == "100"
                ? "已通过"
                : "已关闭"
            }}
          </el-tag>

class额外处理

 <span

          :class="['scope.row.sStatus'?'':'scope.row.sStatus' == '50'
                ? 'danger'
                : scope.row.sStatus == '0'
                ? 'warning'
                : scope.row.sStatus == '100'
                ? 'success'
                : 'info'
          ]"
           
            >{{
              showingDetail.sStatus == "0"
                ? "待审核"
                : showingDetail.sStatus == "50"
                ? "已拒绝"
                : showingDetail.sStatus == "30"
                ? "已撤销"
                : showingDetail.sStatus == "100"
                ? "已通过"
                : "已关闭"
            }}
          </span>

也就是

          :class="['scope.row.sStatus'?'':'scope.row.sStatus' == '50'
                ? 'danger'
                : scope.row.sStatus == '0'
                ? 'warning'
                : scope.row.sStatus == '100'
                ? 'success'
                : 'info'
          ]"
           



css  less部分使用
<style lang='less' scoped>
@Success:#67C23A;
@Warning:#E6A23C;
@Danger:#F56C6C;
@Info:#909399;
.success{
  color: @Success;
}
.danger{
  color: @Danger;
}

.warning{
  color: @Warning;
}
.info{
  color: @Info;
}

标签：el,style,index,50,showingDetail,scope,sStatus,row
来源： https://www.cnblogs.com/lx2331/p/15807688.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。