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

有时候开发时,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框了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
a-select 是一个基于 Vue.js自定义搜索组件,可以方便地集成到你的项目。你可以使用 a-select 来实现自定义的搜索功能,例如搜索下拉列表的选项、搜索结果的展示等。以下是使用 a-select 实现自定义搜索的步骤: 1. 安装 a-select 你可以使用 npm 或 yarn 安装 a-select: ``` npm install a-select --save ``` 或者 ``` yarn add a-select ``` 2. 引入 a-select 在你的项目引入 a-select 组件: ```javascript import ASelect from 'a-select' ``` 3. 使用 a-select 在你的 Vue 组件使用 a-select: ```html <template> <div> <a-select v-model="selected" :options="options" :loading="loading" @search="handleSearch" /> </div> </template> <script> import ASelect from 'a-select' export default { components: { ASelect }, data() { return { selected: '', options: [], loading: false } }, methods: { handleSearch(query) { this.loading = true // 在这里处理搜索逻辑,例如从服务器获取数据并更新 options setTimeout(() => { this.loading = false this.options = [ { value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' } ] }, 1000) } } } </script> ``` 在这个例子,我们使用了 a-select 组件的 `v-model` 属性来绑定选的值,`options` 属性来设置下拉列表的选项,`loading` 属性来设置是否显示加载的状态,`@search` 事件来处理搜索逻辑。当用户在搜索输入文字时,a-select 会触发 `@search` 事件,并将输入的查询字符串作为参数传递给事件处理函数 `handleSearch`。在 `handleSearch` 函数,我们可以根据查询字符串从服务器获取数据,并更新 `options` 属性以更新下拉列表的选项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值