先记录一下,占坑
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;
}