el-tag不会异常,但是style和class会报空数据处理问题、z-index探究

先记录一下,占坑

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


 

上一篇:Android 巧妙实现图片和文字布局


下一篇:升级 selenium4 以后,坑了