问题
使用vue+element-plus开发时发现el-input-number
组件的两个按钮总会处于图层最顶层,覆盖在弹窗等子组件之上,非常影响观感。
文档中也没有对应的属性可以更改,应该是个小bug(
解决方法
在el-input-number
所在的最外层div上添加属性:
.container{position:absolute;z-index:0;
}
z-index = -1
时处于最底层。
代码结构:
<div class="container"><div v-for="(item, index) in foodList" :key="index"><div style="display: flex; flex-wrap: wrap; margin: 2.5%"><el-card shadow="hover"><el-input-number/></el-card></div></div>
</div>
修改后效果: