xm-select/docs/mds/XM21.md

## 分组


### optgroup模式

:::demo 指定选项中的`optgroup`为`true`
```html
<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
    el: '#demo1', 
    toolbar:{
        show: true,
    },
    height: '500px',
    data: [
        {name: '销售员', optgroup: true},
        {name: '张三1', value: 1, selected: true},
        {name: '李四1', value: 2, selected: true},
        {name: '王五1', value: 3, disabled: true},
        {name: '奖品', optgroup: true},
        {name: '苹果2', value: 4, selected: true, disabled: true},
        {name: '香蕉2', value: 5},
        {name: '葡萄2', value: 6},
    ]
})
</script>
```
:::


### children模式

:::demo 选项中的`children`为数组
```html
<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
    el: '#demo2', 
    toolbar:{
        show: true,
    },
    filterable: true,
    height: '500px',
    data: [
        {name: '销售员', children: [
            {name: '张三1', value: 1, selected: true},
            {name: '李四1', value: 2, selected: true},
            {name: '王五1', value: 3, disabled: true},
        ]},
        {name: '奖品', children: [
            {name: '苹果2', value: 4, selected: true, disabled: true},
            {name: '香蕉2', value: 5},
            {name: '葡萄2', value: 6},
        ]},
    ]
})
</script>
```
:::


### 混合模式

如果自己感觉舒服的话, 也可以这么用...

:::demo 
```html

<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
    el: '#demo3', 
    filterable: true,
    toolbar: {
        show: true
    },
    height: '500px',
    data: [
        {name: '城市', optgroup: true},
        {name: '北京13', value: 1},
        {name: '天津1', value: 2, selected: true, disabled: true},
        {name: '上海1', value: 3},
        {name: '销售员', children: [
            {name: '李四23', value: 4, selected: true},
            {name: '王五2', value: 5},
        ]},
    ],
})
</script>
```
:::


### 分组的单击事件

:::demo 
```html
<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
    el: '#demo4', 
    toolbar:{
        show: true,
    },
    height: '500px',
    data: [
        {name: '选中', optgroup: true, click: 'SELECT'},
        {name: '张三', value: 1},
        {name: '李四', value: 2, disabled: true},
        {name: '清空', optgroup: true, click: 'CLEAR'},
        {name: '王五', value: 3, disabled: true},
        {name: '苹果', value: 4, selected: true},
        {name: '自动', optgroup: true, click: 'AUTO'},
        {name: '香蕉', value: 5},
        {name: '葡萄', value: 6},
        {name: '自定义', optgroup: true, click: function(item){
            alert('自定义的, 想干嘛干嘛');
        }},
        {name: '小米', value: 7},
        {name: '华为', value: 8},
    ]
})
</script>
```
:::


### 带有分页的分组

:::demo 
```html
<div id="demo5" class="xm-select-demo"></div>

<script>
var demo5 = xmSelect.render({
    el: '#demo5', 
    toolbar:{
        show: true,
    },
    filterable: true,
    height: '500px',
    paging: true,
    pageSize: 2,
    data: [
        {name: '销售员', children: [
            {name: '张三1', value: 1},
            {name: '李四1', value: 2},
            {name: '王五13', value: 3},
        ]},
        {name: '奖品', children: [
            {name: '苹果23', value: 4},
            {name: '香蕉2', value: 5},
            {name: '葡萄2', value: 6},
        ]},
    ]
})
</script>
```
:::