el-input-number 的图层显示问题
问题
使用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>
修改后效果:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)