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

在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框也会被关闭，目前这个问题还未解决，记录一下，有解决方案的大佬欢迎评论区告知一下