在ant design vue 开发项目中,有一个这样的需求:select下拉显示列表,同时可输入查询
首先html代码如下:
在这里插入图片描述
由于在select里面添加点击事件是无效的,所以我在外层包裹了一个div,添加了点击事件_backChange_
具体事件内容如下:
在这里插入图片描述
_backOpen_用于控制select的下拉状态,_select-table_是封装的子组件,当点击时会触发加载表格字段的函数
在这里插入图片描述
表格如下:
在这里插入图片描述
因为表格内容过长,所以我们使用_scroll_属性,加了一个滚动条,为了美观一点还加了_border_属性,
_customRow_是表格自带的一个可以对行进行操作的属性,官方文档介绍如下:
在这里插入图片描述
我们需要在点击任意一条数据时,会将对应内容赋值上去,所以我通过_customRow_给每一个行加了一个点击事件,函数内容如下:
在这里插入图片描述
它可以把record和index属性传过来,但是我需要的是record,所以就没传index了,record里面的数据就是,我点击的那一行的数据,我通过*$emit_将值传给了父组件的_check_事件,我在父组件中绑定在check事件上的函数为_checkBack*,所以程序会执行_checkBack_函数,函数内容如下:
在这里插入图片描述
因为传到后台的必须是当前数据的id,而要显示的数据必须是名称,所以我用了一个全局变量存储起来。
注意:
后台返回的数据中,有的名称是一样的,而ant design vue 的value值必须不相同,与key值一样,要保持唯一性,否则会报错,所以我们只能绑定id,保证唯一性,官方解释如下:

在这里插入图片描述
:getPopupContainer=“triggerNode => triggerNode.parentNode” 是为了防止在弹框中,滑动时,select框跟着滚动,官方解释如下:
在这里插入图片描述

@blur=“backOpen = false” 这一段代码是为了点击select框外时,关不掉select框,也就是因为这个,我遇到了一个问题,当我点击表格滚动条的同时,select失去了焦点,失焦事件会被触发,select框也会被关闭,目前这个问题还未解决,记录一下,有解决方案的大佬欢迎评论区告知一下

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐