@aligov/components-easy-select

基于fusion的select进行封装的业务组件

Usage no npm install needed!

<script type="module">
  import aligovComponentsEasySelect from 'https://cdn.skypack.dev/@aligov/components-easy-select';
</script>

README

easySelect

@aligov/components-easy-select

简易下拉选择器

何时使用

相比 next 的 Select,功能上多了一个下拉数据自动请求,外部不用关注请求,只要获取选择结果即可

  • 支持
    • 输入后,只能从下拉框选择;
    • 或者输入后,保留输入值,也可以从下拉框选择;💔但这种情况从下拉框选择后显示的是 value,目前未解决这个问题
  • 可以结合 field 使用

Install

tnpm install @alife/whale-easy-select --save

API

除有说明的属性,其他同 next 的 select

成员 说明 类型 默认值
auto 是否自动请求,在初始的时候就请求数据 Boolean false
autoSearchValue 自动请求时的请求值,非 undefined 且 auto 为 true 时有效 Any undefined
service 必填,请求服务
签名:
Function(value: String) => promise
Function
initDataSource 初始数据源,可以是静态的数组或函数(同步或异步函数),函数接受一个入参,来自初始化时 props 中的 value/autoSearchValue/defaultValue Array、Function []
onlySelect 是否只能用下拉选择的值,不能使用自己输入的值,默认可以使用自己输入的值 Boolean false
transformSearchValue 用于搜索时把选择的值转换后再发送 NOTE::不建议使用,业务在 service 里转换即可 Function func.noop
isMultiFooter mode为multiple时是否有底部全选部分 Boolean true
filterLocal 是否本地过滤,若开启,则搜索时仅从本地数据源过滤,不会再请求远程数据。(auto 还是有效) Boolean false
fetchWhenEmptySearch 搜索为空时是否也触发请求,默认false,即默认 clear 时不会触发请求 Boolean false

注意

当使用动态搜索时,需要将filterLocal设置为false.