当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
    评论
ant-design-vue 下拉框多选的自定义选项可以通过 `template` 和 `render` 方法来实现。 使用 `template` 的方式,可以在 `<a-select-option>` 标签内编写自定义的选项内容。例如: ```html <a-select v-model="selectedOptions" mode="multiple"> <a-select-option v-for="option in options" :key="option.value"> <span>{{ option.label }}</span> <a-checkbox v-model="option.checked"></a-checkbox> </a-select-option> </a-select> ``` 在上面的代码,`options` 是一个数组,用于存储所有的选项。每个选项包含 `label` 和 `value` 属性,以及一个 `checked` 属性用于记录是否选。通过循环遍历 `options` 数组,使用 `<a-select-option>` 标签来创建每个选项,并在其放置自定义的内容。 使用 `render` 方法的方式更加灵活,可以直接通过 JavaScript 代码来生成自定义选项。例如: ```html <a-select v-model="selectedOptions" mode="multiple"> <template v-for="option in options"> <a-select-option :value="option.value" :key="option.value"> {{ option.label }} <a-checkbox v-model="option.checked"></a-checkbox> </a-select-option> </template> </a-select> ``` 在上面的代码,通过 `<template>` 标签来生成多个 `<a-select-option>` 标签,然后在其使用 JavaScript 代码来设置 `value` 和 `key` 属性,并添加自定义内容。 需要注意的是,无论使用 `template` 还是 `render` 方法,都需要使用 `v-model` 来绑定选的选项,以及在选项设置 `value` 属性和 `key` 属性。另外,还可以根据具体需求在选项添加其他自定义的组件或标签。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值