@dfeidao/fd-w000018

下拉搜索框

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>