**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> ```