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

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

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

当ant-design-vue中select自定义下拉框覆盖select框_第1张图片

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

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

3.触发select框展示下拉框时,可以看到里面有个这个属性pupupRef
当ant-design-vue中select自定义下拉框覆盖select框_第2张图片
pupupRef属性里面有个align属性
当ant-design-vue中select自定义下拉框覆盖select框_第3张图片
4.所以就将这个属性中修改为false

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

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

你可能感兴趣的:(vue.js,javascript,前端)