下拉搜索框
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-w000018
Attributes
multiple
下拉框多选
searchPlaceholder
搜索框显示的默认值
data
下拉框数据
searchText
搜索框没有搜索到数据时显示的文字
allowDeselect
允许在单个选择下拉列表中取消选择值
placeholder
下拉框显示的默认值
text-field
要显示字段的名称
value-field
value字段的名称
optgroup-text-field
二级要显示字段的名称
optgroup-value-field
二级value字段的名称
Methods
disable
editor.disable();
enable
editor.enable();
get_selected
获取当前选中项
editor.get_data();
set_selected
设置当前选中项
editor.set_data('');
set_data
设置原始选择和重新渲染选择的选项
editor.set_data(data);
add_data
在原始的选项中添加数据
// data数据与当前控件数据结构一致
editor.add_data(data);
Events
fdwe-select-change
选择值发生改变,返回参数格式({ text: 'text', value: 'value' })
Example
单选(数组对象)
<fd-w000018 width='200px' searchPlaceholder='请输入' text-field='text' data='[{"text":"AAAAAA", "value":123, "value2": "abc"},{"text":"BBBBBB"},{"text":"CCCCCC"},{"text":"DDDDDD"},{"text":"EEEEEE"}]'
searchText='没找到' allowDeselect placeholder='请选择'>
</fd-w000018>
单选(数组对象)设置默认不选择
<fd-w000018 width='200px' searchPlaceholder='请输入' text-field='text' data='[{"text":"AAAAAA", "value":123, "value2": "abc"},{"text":"BBBBBB"},{"text":"CCCCCC"},{"text":"DDDDDD"},{"text":"EEEEEE"}]'
searchText='没找到' allowDeselect placeholder='请选择'>
</fd-w000018>
const widget=fd.data.node.querySelector('[fd-data-id="fd-000018"]');
widget.set_select('');
单选(数组)
<fd-w000018 width='200px' searchPlaceholder='请输入' text-field='text' data='["AAAAAA","BBBBBB","CCCCCC","DDDDDD","EEEEEE"]'
searchText='没找到' allowDeselect placeholder='请选择'>
</fd-w000018>
单选二级分类
<fd-w000018 width='200px' searchPlaceholder='请输入' text-field='text' data='[{"text":"一二三", "children": [{"text":"一二三"},{"text":"BBBBBB", "c": "bbb"}]},{"text":"BBBBBB", "c": "bbb"},{"text":"CCCCCC", "c": "ccc"},{"text":"DDDDDD", "c": "ddd"},{"text":"EEEEEE", "c": "eee"}]'
searchText='没找到' allowDeselect placeholder='请选择'>
</fd-w000018>
单选(映射传参)
<fd-w000018 style="width: 200px">
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
</fd-w000018>
单选(映射传参,二级菜单)
<fd-w000018 style="width: 200px">
<optgroup label="Label 1">
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
</optgroup>
<optgroup label="Label 2">
<option value="value 21">Value 1</option>
<option value="value 22">Value 2</option>
<option value="value 23">Value 3</option>
</optgroup>
</fd-w000018>
多选
<fd-w000018 style="width: 200px" multiple searchPlaceholder='请输入' text-field='text' data='[{"text":"一二三"},{"text":"BBBBBB"},{"text":"CCCCCC"},{"text":"DDDDDD"},{"text":"EEEEEE"}]'
searchText='没找到' allowDeselect placeholder='请选择---------------------------'>
</fd-w000018>
多选二级分类
<fd-w000018 style="width: 200px" multiple searchPlaceholder='请输入' text-field='text'
data='[{"text":"一二三", "children": [{"text":"一二三"},{"text":"BBBBBB", "c": "bbb"}]},{"text":"BBBBBB", "c": "bbb"},{"text":"CCCCCC", "c": "ccc"},{"text":"DDDDDD", "c": "ddd"},{"text":"EEEEEE", "c": "eee"}]'
searchText='没找到' allowDeselect placeholder='请选择---------------------------'>
</fd-w000018>
多选(映射传参)
<fd-w000018 style="width: 200px" multiple>
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
</fd-w000018>
多选(映射传参,二级菜单)
<fd-w000018 style="width: 200px" multiple>
<optgroup label="Label 1">
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
</optgroup>
<optgroup label="Label 2">
<option value="value 21">Value 1</option>
<option value="value 22">Value 2</option>
<option value="value 23">Value 3</option>
</optgroup>
</fd-w000018>