eltag不会异常，但是style和class会报空数据处理问题、zindex探究

先记录一下，占坑

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