**JSearchSelect字典表的搜索组件** 下拉搜索组件,支持异步加载,异步加载用于大数据量的字典表 [TOC] ## 参数定义 | 参数 | 类型 | 必填 |说明| |--------------|---------|----|---------| | value|[String,number] |否 | 无|回显值 | | placeholder |string | | placeholder | | disabled |Boolean | | 是否禁用 | | dict |string | | 表名,显示字段名,存储字段名拼接而成的字符串,如果提供了dictOptions参数 则此参数可不填| | dictOptions |Array | | 多选项,如果dict参数未提供,可以设置此参数加载多选项 | | async |Boolean | | 是否支持异步加载,设置成true,则通过输入的内容加载远程数据,否则在本地过滤数据,默认false| | popContainer|string| | 父节点对应的CSS 选择器,内部使用`document.querySelector`选择父节点，如设置`.pnode`,则找到有class为pnode的节点然后渲染下拉框 | | pageSize|number| | 当async设置为true时有效，表示异步查询时，每次获取数据的数量，默认10| | getPopupContainer|Function| | 父节点对应的CSS 选择器,内部使用`node.parentNode`选择父节点 | ## 效果展示  ## 使用示例 ```vue <template> <a-form> <a-form-item label="下拉搜索" style="width: 300px"> <JSearchSelectTag placeholder="请做出你的选择" v-model:value="selectValue" :dictOptions="dictOptions"> </JSearchSelectTag> {{ selectValue }} </a-form-item> <a-form-item label="异步加载" style="width: 300px"> <JSearchSelectTag placeholder="请做出你的选择" v-model:value="asyncSelectValue" dict="sys_depart,depart_name,id" async> </JSearchSelectTag> {{ asyncSelectValue }} </a-form-item> </a-form > </template> <script lang='ts' setup> import {JSearchSelectTag} from '/@/components/Form' const selectValue=ref(''); const asyncSelectValue=ref(''); const dictOptions:[{ text:"选项一", value:"1" },{ text:"选项二", value:"2" },{ text:"选项三", value:"3" }] </script> ```