当ant-design-vue中select自定义下拉框覆盖select框

当自定义Select下拉框内容时,可能出现下拉框覆盖输入框,导致无法输入。通过在a-select标签添加ref属性,然后在dropdownRender插槽内定义内容。通过调整popupRef的align.overflow.adjustY属性为false,可以避免下拉框覆盖,确保用户能正常输入。

有时候开发时,select下拉框的内容需要自定义内容时,可能会出现,下垃框覆盖到select框,用户想输入内容搜索的时候导致无法输入

  1. 如下图所示,覆盖后,无法在输入框输入内容

在这里插入图片描述

2.首先在a-select 标签里加上ref属性,形如下面,这里只展示一部分代码

 <a-select  style="width: 120px" ref='selectNode'>
    <div slot="dropdownRender" >
     //定义其它内容......
    </div>
  </a-select>

3.触发select框展示下拉框时,可以看到里面有个这个属性pupupRef
在这里插入图片描述
pupupRef属性里面有个align属性
在这里插入图片描述
4.所以就将这个属性中修改为false

//关闭溢出位置调整
    let items = this.$refs.selectFocus.popupRef;
        items.align.overflow.adjustY = false;

5.后面下拉框的位置就不会出现覆盖select框了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值