JSearchSelectTag 字典表的搜索组件

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

1.参数配置

参数类型必填说明
placeholderstringplaceholder
disabledBoolean是否禁用
dictstring表名,显示字段名,存储字段名拼接而成的字符串,如果提供了dictOptions参数 则此参数可不填
dictOptionsArray多选项,如果dict参数未提供,可以设置此参数加载多选项
asyncBoolean是否支持异步加载,设置成true,则通过输入的内容加载远程数据,否则在本地过滤数据,默认false

2.使用示例

  1. <template>
  2.   <a-form>
  3.     <a-form-item label="下拉搜索" style="width: 300px">
  4.       <j-search-select-tag
  5.         placeholder="请做出你的选择"
  6.         v-model="selectValue"
  7.         :dictOptions="dictOptions">
  8.       </j-search-select-tag>
  9.       {{ selectValue }}
  10.     </a-form-item>
  12.     <a-form-item label="异步加载" style="width: 300px">
  13.       <j-search-select-tag
  14.         placeholder="请做出你的选择"
  15.         v-model="asyncSelectValue"
  16.         dict="sys_depart,depart_name,id"
  17.         :async="true">
  18.       </j-search-select-tag>
  19.       {{ asyncSelectValue }}
  20.     </a-form-item>
  21.   </a-form >
  22. </template>
  24. <script>
  25.   import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  26.   export default {
  27.     components: {JSearchSelectTag},
  28.     data() {
  29.       return {
  30.         selectValue:"",
  31.         asyncSelectValue:"",
  32.         dictOptions:[{
  33.           text:"选项一",
  34.           value:"1"
  35.         },{
  36.           text:"选项二",
  37.           value:"2"
  38.         },{
  39.           text:"选项三",
  40.           value:"3"
  41.         }]
  42.       }
  43.     }
  44.   }
  45. </script>