el-input-number 的图层显示问题

问题

使用vue+element-plus开发时发现el-input-number组件的两个按钮总会处于图层最顶层,覆盖在弹窗等子组件之上,非常影响观感。
image
文档中也没有对应的属性可以更改,应该是个小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>

修改后效果:
image

posted @ 2024-05-16 01:22  qiuer0121  阅读(107)  评论(0)    收藏  举报