JSearchSelect字典表搜索组件✔

下拉搜索组件,支持异步加载,异步加载用于大数据量的字典表

参数定义

参数	类型	必填	说明
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选择父节点
adjustY	Boolean		开启Y轴溢出位置调整

表字典配置规则 参考文档

效果展示

使用示例

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