控件使用文档

下拉搜索框
Attributes
Methods
Events
1. fdwe-select-change
Example

下拉搜索框

<fd-w000018></fd-w000018>

Attributes

`multiple`

下拉框多选

`searchPlaceholder`

搜索框显示的默认值

`data`

下拉框数据

`searchText`

搜索框没有搜索到数据时显示的文字

`allowDeselect`

允许在单个选择下拉列表中取消选择值

`placeholder`

下拉框显示的默认值

`text-field`

要显示字段的名称

`catagory-field`

要显示的一级分类的名称

Methods

`disable`

将下拉框禁用

参数
- 无

 editor.disable();

`get_selected`

返回当前所选值的字符串或数组

参数
- 无
返回值
- IData[]

 editor.get_data();

`set_selected`

设置当前选择的值

参数
- string[] string
返回值
- 无

 editor.set_data('');

`set_data`

设置原始选择和重新渲染选择的选项

参数
- data:IData[]

 editor.set_data(data);

`add_data`

在原始的选项中添加数据

参数
- data:IData[]

// data数据与当前控件数据结构一致
 editor.add_data(data);

Events

`fdwe-select-change`

选择值发生改变

抛出的参数args[0]中：


单选-有数据选择：
data:{属性data中的某一条数据}

单选-无数据选择：
无data属性

多选-有数据选择：
{
	"0"：{data:{属性data中的某一条数据}}, // 第一个选择数据
	"1"：{data:{属性data中的某一条数据}}  // 第二个选择数据
}

多选-无数据选择：
无'0'、'1'属性

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":"一二三", "c": "aaa"},{"text":"BBBBBB", "c": "bbb"},{"text":"CCCCCC", "c": "ccc"},{"text":"DDDDDD", "c": "ddd"},{"text":"EEEEEE", "c": "eee"}]' catagory-field="c"
 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' catagory-field="c"
 data='[{"text":"一二三", "c": "aaa"},{"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>