### xm-select Grouping Example

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Demonstrates how to use the 'children' property to create grouped options in xm-select. It also shows how to define click events for groups, such as 'SELECT', 'CLEAR', 'AUTO', or custom functions.

```javascript
{
    name: '销售员',
    children: [
        {name: '李四', value: 4, selected: true},
        {name: '王五', value: 5}
    ]
},

//可在分组上定义click属性, 来定义点击事件
{
    name: '选中',
    children: [...],
    click: 'SELECT'
},
{
    name: '清空',
    children: [...],
    click: 'CLEAR'
},
{
    name: '自动',
    children: [...],
    click: 'AUTO'
},
{
    name: '自定义',
    children: [...],
    click: function(item){
        alert('自定义的, 想干嘛干嘛');
    }
}
```

--------------------------------

### Get xm-select Selected Data

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Retrieves the currently selected data from the xm-select component. The 'type' parameter can be specified to get different formats of the data, such as 'name', 'nameStr', 'value', or 'valueStr'.

```javascript
xmSelect.getValue(type: 'name' | 'nameStr' | 'value' | 'valueStr');
```

--------------------------------

### Get xm-select Tree Node Data

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Retrieves data for tree nodes in the xm-select component (added in v1.2.0). It allows specifying whether to fetch only leaf nodes or to include half-checked nodes.

```javascript
xmSelect.getTreeValue(leafOnly?: boolean, includeHalfChecked?: boolean);
```

--------------------------------

### Render xm-select Instance

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Shows the basic usage of the `xmSelect.render()` method to initialize an xm-select instance with provided options.

```javascript

```

--------------------------------

### Customize xm-select Toolbar List

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Demonstrates how to customize the 'list' array for the xm-select toolbar. This allows for adding custom buttons with icons, names, and click handlers, beyond the default 'ALL' and 'CLEAR' options.

```javascript
list: [ "ALL", "CLEAR", 
	{
		//显示图标, 可以是layui内置的图标, 也可以是自己引入的图标
		//传入的icon会转化为 <i class="layui-icon layui-icon-face-smile"></i>
		icon: 'layui-icon layui-icon-face-smile',
		//显示名称 
		name: 'xxx',
		//点击时触发的回调
		method: function(data){
			//data 当前页面的数据
			
		}
	}
]
```

--------------------------------

### Configure xm-select Model Options

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Defines the configuration for the 'model' in xm-select, controlling aspects like icon display, label formatting, and custom rendering. It allows for detailed customization of how selected items are presented.

```javascript
model: {
	//是否展示复选框或者单选框图标 show, hidden:变换背景色
	icon: 'show',
	label: {
		//使用方式
		type: 'block',
		//使用字符串拼接的方式
		text: {
			//左边拼接的字符
			left: '',
			//右边拼接的字符
			right: '',
			//中间的分隔符
			separator: ', ',
		},
		//使用方块显示
		block: {
			//最大显示数量, 0:不限制
			showCount: 0,
			//是否显示删除图标
			showIcon: true,
			//自定义渲染label, 默认渲染name, 回调参数(item, sels)
			template: null,
		},
		//自定义文字
		count: {
			//函数处理
			template(data, sels){
				//data: 所有的数据
				//sels: 选中的数据
				return `已选中 ${sels.length} 项, 共 ${data.length} 项`
			}
		},
	},
	//展示类型, 下拉框形式: absolute, 直接显示模式: relative, 浮动布局: fixed
	type: 'absolute',
}
```

--------------------------------

### Open xm-select Dropdown

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Programmatically opens the dropdown menu of the xm-select component. This method does not require any parameters.

```javascript
xmSelect.opened();
```

--------------------------------

### xm-select Warning Method

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Triggers a warning message within the xm-select component. The 'color' parameter can set the warning color, and 'sustain' controls whether the warning message persists.

```javascript
xmSelect.warning(color?: string, sustain?: boolean);
```

--------------------------------

### Reset xm-select to Render State

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Resets the xm-select component to its state at the time of rendering. This is useful for reverting user selections or dynamic changes.

```javascript
xmSelect.reset();
```

--------------------------------

### Dynamically Set xm-select Values

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Dynamically updates the selected values in the xm-select component. It accepts an array of selected data and can optionally control the dropdown's display state and whether to trigger the 'on' event listener.

```javascript
xmSelect.setValue(array: any[], show?: boolean, listenOn?: boolean);
```

--------------------------------

### Enable xm-select Options

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Enables specific options within the xm-select component, effectively setting their 'disabled' property to false (added in v1.2.0). It takes an array of options to be enabled.

```javascript
xmSelect.enable(array: any[]);
```

--------------------------------

### Update xm-select Multi-select Selection

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Updates the selection in a multi-select mode for the xm-select component. This method can be used to manage selections, and unlike 'reset', it does not retain the previous render state.

```javascript
xmSelect.update(options: any);
```

--------------------------------

### Change xm-select Tree Node Expansion State

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Updates the expansion state of nodes in the tree mode of xm-select (added in v1.2.0). It can expand all nodes, collapse all nodes, or expand/collapse specific nodes based on their keys.

```javascript
xmSelect.changeExpandedKeys(keys: boolean | any[]);
```

--------------------------------

### Recalculate xm-select Position for Fixed Layout

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Recalculates the position of the xm-select component when using a fixed layout mode (added in v1.2.2). This method is useful for ensuring correct positioning after layout changes.

```javascript
xmSelect.calcPosition();
```

--------------------------------

### Append Values to xm-select

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Appends new data to the currently selected values in the xm-select component. This method takes an array of data to be added to the existing selection.

```javascript
xmSelect.append(array: any[]);
```

--------------------------------

### Close xm-select Dropdown

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Programmatically closes the dropdown menu of the xm-select component. This method does not require any parameters.

```javascript
xmSelect.closed();
```

--------------------------------

### Disable xm-select Options

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Disables specific options within the xm-select component, setting their 'disabled' property to true (added in v1.2.0). It accepts an array of options to be disabled.

```javascript
xmSelect.disable(array: any[]);
```

--------------------------------

### Delete Values from xm-select

Source: https://github.com/anke1460/xm-select/blob/master/docs/mds/options.md

Removes specified data from the currently selected values in the xm-select component. This method accepts an array of data to be deleted from the selection.

```javascript
xmSelect.delete(array: any[]);
```