ant design vue 中select 的自定义下拉框内容属性dropdownRender的使用（一）

最新推荐文章于 2024-08-12 05:07:15 发布
最新推荐文章于 2024-08-12 05:07:15 发布
阅读量7.7k 收藏 7
点赞数 1
分类专栏： 关于ant design vue 的那些事 文章标签： vue.js 前端 javascript ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59697051/article/details/121751506
版权
本文介绍了如何在Ant Design Vue的Select组件中实现自定义下拉框内容，包括添加搜索查询功能，并展示了如何将下拉框内容与表格结合。在实现过程中，遇到select失去焦点导致下拉框关闭的问题，文章记录了这一问题并期待解决方案。
摘要由CSDN通过智能技术生成

在ant design vue 开发项目中，有一个这样的需求：select下拉显示列表，同时可输入查询
首先html代码如下：
在这里插入图片描述
由于在select里面添加点击事件是无效的，所以我在外层包裹了一个div，添加了点击事件backChange
具体事件内容如下：
在这里插入图片描述
backOpen用于控制select的下拉状态，select-table是封装的子组件，当点击时会触发加载表格字段的函数
在这里插入图片描述
表格如下：
在这里插入图片描述
因为表格内容过长，所以我们使用scroll属性，加了一个滚动条，为了美观一点还加了border属性，
customRow是表格自带的一个可以对行进行操作的属性，官方文档介绍如下：

最低0.47元/天 解锁文章
等鲸落
关注
专栏目录
Antd下拉选择,自动匹配功能的实现
01-18
我就废话不多说了，大家还是直接看代码吧~ <Select placeholder=客户名称 showSearch optionFilterProp=children//自动匹配输入 onChange={this.selectChange} > {this.state.selectCustomer} </Select> 补充知识：antd select如何支持既能输入不存在的选项又能进行下拉框选择 1.Select必须具备onSearch,onBlur,onChange这三个属性; <Select showSearch value={this.state.value} o
Antd Select组件 DropdownRender扩展
localhost
04-08 9058
Antd Select组件 DropdownRender扩展
Ant-Design-Vue快速上手指南+排坑
最新发布
Python老吕的博客
08-12 1263
Ant Design Vue是Vue.js版本的Ant Design，一个基于Vue.js的企业级UI设计语言和组件库。它提供了一系列高质量的组件，帮助开发者快速构建高质量的Vue应用。这些组件不仅遵循了Ant Design的设计原则和模式，还充分利用了Vue的特性，如组件化、响应式等。Ant Design Vue组件库包括但不限于按钮、输入框、选择器、表格、布局、导航、表单验证、消息提示、弹窗等，几乎涵盖了构建现代Web应用所需的所有UI元素。
Vue antdv a-select 自定义 dropdownRender 的内容放到头部
卡尔特斯
10-22 1万+
在使用阿里的 Ant Design Vue 框架时，需要自定义一下 a-select 如果需要完全自定义下拉框，直接重写 dropdownRender 即可： 如果只是需要在官方当前的样式上加点自定义的东西，官方文档里面有现成的效果 官方默认效果是这样的： 默认自定义dom是在底部的，但是如果需要将下面的自定义dom放到头部，其实很简单，只需要这样修改即可 <a-select default-value="lucy" style="width: 120px"> ..
React Antd Select组件 自定义下拉内容(dropdownRender扩展菜单) 点击事件没有响应
zhangruilinmoo
05-19 5711
React Antd Select组件 自定义下拉内容(dropdownRender扩展菜单) 点击事件没有响应
Ant Design 基于dropdownRender属性对下拉菜单的封装
weixin_45945214的博客
09-14 2718
很多时候, antd的select无法满足日常工作中的使用需求, 但是Api文档提供了dropdownRender属性是其有了很强的拓展性, 为此封装了select memu组件来满足选择功能
antd select 组件 使用dropdownRender并设置mode=“multiple“会触发删除的解决方法
qq_37904407的博客
10-25 1114
组件中删除已选择一项的事件，我们只需要在。元素里阻止触发删除事件即可。输入框按下删除键时会触发。
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
editablecell:Ant Design of Vue之带select控件，单元格编辑功能的表格EditableCell组件
05-11
可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
在Ant Design Vue中，`a-select`组件是一个用于选择项的下拉框，它提供了丰富的交互和样式。在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
select下拉菜单自由扩展-输入框添加/options删除
JessicaLi的博客
11-07 1036
antdv select 官方使用dropdownRender对。
antdv select下拉菜单自由扩展—添加输入框的使用问题
weixin_38122772的博客
02-23 6097
背景 antdv select 官方使用dropdownRender对下拉菜单进行自由扩展， 为了解决点击 dropdownRender 里的内容浮层关闭的问题，官方建议添加preventDefault，但是这样扩展内容里的输入框无法聚焦 一开始采取的方案是手动给自定义的输入框focus事件，但是基于页面只会有一个focus的原则，会因此触发select的输入框blur，反而导致下拉菜单收起，最后还是采取手动控制select的open属性来解决了问题 解决思路 在select上添加一个透明的div作为se
LayUI中的内置模块之 下拉菜单组件文档 layui.dropdown
daimeijin的博客
08-14 1万+
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 下拉菜单组件文档 dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜
开发日记--Django前后端数据交互（二）
qq_51470725的博客
11-01 838
django+layui实现下拉菜单
antdv Select dropdownRender Input 不能输入的问题
WangYan的博客
07-26 1057
小说明：外层 div click 事件触发select开启，然后 slot 内部 div 利用 mouseleave 属性，模拟出select 的失焦 blur 事件。简言之：外层套div，然后利用Select的open属性。
ant design vue选择器select的使用（详细）
热门推荐
weixin_45745641的博客
08-11 1万+
概要 这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图： 具体实现过程： 写好前端样式 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果 看一下 a-select 中的
ant design vue自定义下拉框
08-17
在 Ant Design Vue 中，你可以使用 Select 组件来创建下拉框，并且可以通过自定义选项来实现个性化的下拉框。以下是一个简单的例子： ```vue <template> <a-select v-model="selectedOption"> <a-select-option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </a-select-option> </a-select> </template> <script> export default { data() { return { selectedOption: null, options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' }, ], }; }, }; </script> ``` 在上面的例子中，我们使用了 Ant Design Vue 的 `Select` 组件来创建了一个基本的下拉框。通过 `v-model` 指令，我们可以绑定选中的值到 `selectedOption` 变量上。 然后，我们使用 `v-for` 指令来遍历 `options` 数组，并通过 `a-select-option` 组件来创建每个选项。通过设置 `value` 属性来指定每个选项的值，以及使用双花括号语法来显示选项的标签。 你可以根据自己的需求对下拉框进行进一步的自定义，比如添加图标、样式等。希望这个例子对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值