el-tag不会异常,但是style和class会报空数据处理问题、z-index探究(El tag will not be abnormal, but style and class will report null data processing problems and Z-index problems)

先记录一下,占坑

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

————————

Record it first, zhankeng

Z-index problem

z-index

First of all, there are a lot of entry into force. You can have a BFC

Secondly, the conflict is because the parent element has set a Z-index that can form a Z-index and overwrites the child element, which leads to the conflict when the original high child element Z-index is compared with others

When debugging, you should

Set the Z-index on the parent element from outside to inside. Where the header can be overwritten is the problem, and then split~

(the parent element is from the inside to the outside. In addition, position absolute should be added because it needs to take effect.)

It’s not as convenient as El tag. Zh prefers that type is props and style is different

It can be processed with functions or 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”                ? ” To be approved “: showingdetail. Sstatus = =” 50 “?” Rejected “: showingdetail. Sstatus = =” 30 “?” Revoked “: showingdetail. Sstatus = =” 100 “?” Passed ‘:’ closed ‘}} & lt; / El tag & gt;

Class extra processing & lt; span          :class=” [‘scope.row.sStatus’?”:’scope.row.sStatus’ == ’50’                ? ‘danger’                : scope.row.sStatus == ‘0’                ? ‘warning’                : scope.row.sStatus == ‘100’                ? ‘success’                : ‘info’          ]”                       >{{              showingDetail.sStatus == “0”                ? ” To be approved “: showingdetail. Sstatus = =” 50 “?” Rejected “: showingdetail. Sstatus = =” 30 “?” Revoked “: showingdetail. Sstatus = =” 100 “?” Passed ‘:’ closed ‘}} & lt; / span & gt; that is: class = ” [‘scope.row.sStatus’?”:’scope.row.sStatus’ == ’50’                ? ‘danger’                : scope.row.sStatus == ‘0’                ? ‘warning’                : scope.row.sStatus == ‘100’                ? ‘success’                : ‘info’          ]”The CSS less section uses & lt; style lang =’less’ scoped & gt; @ success: #67c23a; @ warning: #e6a23c; @ danger: #f56c6c; @ Info: #909399;. Success {color: @ success;} danger{  color: @Danger;}. warning{  color: @Warning;}. info{  color: @Info;}