v1.0.6

#### 新增 - 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能 - 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式 - 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示 #### Bug fixes - 修复工具条中`全选`和`清空`还可以操作禁用选项的问题 - 修复远程搜索中`selected`不回显的问题
2019-10-14 19:05:40 +08:00 · 2019-10-14 19:05:40 +08:00 · 9b55425ebb
commit 9b55425ebb
parent 1c58a43a4b
20 changed files with 384 additions and 76 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,21 @@
 ## 更新日志

+### 1.0.6
+
+*2019-10-14*
+
+#### 新增
+
+- 新增`showCount`配置, 可以控制选项的数量, 提高渲染性能
+- 新增分组模式, 可以在选项中使用`optgroup`或`children`来开启, 分组时不建议开启分页模式
+- 远程搜索中新增`show`参数, 可以查看当前下拉框是否显示
+
+#### Bug fixes
+
+- 修复工具条中`全选`和`清空`还可以操作禁用选项的问题
+- 修复远程搜索中`selected`不回显的问题
+
+
 ### 1.0.5

 *2019-10-10*
--- a/dist/index.html
+++ b/dist/index.html
@ -1 +1 @@
-<!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> --><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> --><title>xm-select</title><link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"><script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script></head><body><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html>
+<!DOCTYPE html><html><head><link rel="preload" href="./xm-select.js" as="script"><link rel="preload" href="./static/docs.js" as="script"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/highlight.js@9.3.0/styles/color-brewer.css"> --><!-- <link rel="stylesheet" href="//shadow.elemecdn.com/npm/element-ui@2.12.0/lib/theme-chalk/index.css"> --><title>xm-select</title><link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css"><script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"></div><script type="text/javascript" src="./xm-select.js"></script><script type="text/javascript" src="./static/docs.js"></script></body></html>
--- a/dist/static/2.js
+++ b/dist/static/2.js
--- a/dist/static/3.js
+++ b/dist/static/3.js
--- a/dist/static/docs.js
+++ b/dist/static/docs.js
--- a/dist/xm-select.js
+++ b/dist/xm-select.js
--- a/docs/index.ejs
+++ b/docs/index.ejs
@ -14,6 +14,7 @@
 	<title>xm-select</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.all.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </head>
 <body>

--- a/docs/mds/XM05.md
+++ b/docs/mds/XM05.md
@ -99,13 +99,13 @@ var demo4 = xmSelect.render({
    el: '#demo4', 
    filterable: true,
    remoteSearch: true,
-    remoteMethod: function(val, cb){
+    remoteMethod: function(val, cb, show){
        //这里模拟3s后返回数据
        setTimeout(function(){
            //需要回传一个数组
            cb([
                {name: '水果' + val, value: val + 1},
-                {name: '蔬菜' + val, value: val + 2},
+                {name: '蔬菜' + val, value: val + 2, selected: true},
                {name: '桌子' + val, value: val + 3},
                {name: '北京' + val, value: val + 4},
            ])
@ -116,3 +116,44 @@ var demo4 = xmSelect.render({
 </script>
 ```
 :::
+
+
+###  远程搜索
+
+第一步: 需要先开启搜索 `filterable: true,`
+
+第二步: 开启自定义搜索 `remoteSearch: true`
+
+第三部: 重写搜索回调
+
+简单吧, 记得Star ^_^
+
+:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+    el: '#demo5', 
+    filterable: true,
+    remoteSearch: true,
+    remoteMethod: function(val, cb, show){
+        axios({
+            method: 'get',
+            url: 'https://easy-mock.com/mock/5da028e2cda1720dffee5f85/xm-select/search',
+            params: {
+                keyword: val,
+            }
+        }).then(response => {
+            var res = response.data;
+            cb(res.data)
+            demo1.setValue([ 1, 2, 3 ], show) 
+        }).catch(err => {
+            cb([]);
+        });
+    },
+    data: []
+})
+</script>
+```
+:::
--- a/docs/mds/XM16.md
+++ b/docs/mds/XM16.md
@ -26,7 +26,7 @@ var demo1 = xmSelect.render({
 :::


-### 监听动态复制
+### 监听+动态赋值

 选中北京后, 不能选中上海, 二者互斥

--- a/docs/mds/XM20.md
+++ b/docs/mds/XM20.md
@ -0,0 +1,39 @@
+## 选项显示数量
+
+
+
+:::tip
+当数量量过大时, 又不想使用分页的形式, 就可以控制显示数量, 用搜索的方式把最适合的数据展示出来
+
+!!! 此处与分页配置互斥, 开启分页后, 此配置无效
+
+!!! 使用此配置时建议开启搜索模式, 否则无法显示全部数据
+:::
+
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+<div>可以搜索 1, 2, 3看看效果</div>
+
+<script>
+var demo1 = xmSelect.render({
+    el: '#demo1', 
+    filterable: true,
+	showCount: 5,
+    data: [
+        {name: '张三1', value: 1, selected: true},
+        {name: '李四1', value: 2, selected: true},
+        {name: '王五1', value: 3},
+        {name: '赵六1', value: 4},
+        {name: '苹果2', value: 5},
+        {name: '香蕉2', value: 6},
+        {name: '凤梨2', value: 7},
+        {name: '葡萄2', value: 8},
+        {name: '樱桃3', value: 9},
+        {name: '车厘子3', value: 10},
+        {name: '火龙果3', value: 11},
+    ]
+})
+</script>
+```
+:::
--- a/docs/mds/XM21.md
+++ b/docs/mds/XM21.md
@ -0,0 +1,101 @@
+## 分组
+
+
+
+:::tip
+使用分组时, 不建议开启分页, 也不建议开启选项数量控制!!!
+:::
+
+
+### 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>
+```
+:::
--- a/docs/mds/ZTEST.md
+++ b/docs/mds/ZTEST.md
@ -10,10 +10,19 @@
 var demo1 = xmSelect.render({
    el: '#demo1', 
    filterable: true,
+    toolbar: {
+        show: true
+    },
+    height: '500px',
    data: [
-        {name: '张三', value: 1},
-        {name: '李四', value: 2},
-        {name: '王五', value: 3},
+        {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>
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@ -16,7 +16,7 @@
 | delay             | 搜索延迟 ms | int           |    -    |    500    |
 | filterMethod      | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key           |    -    |    -    |
 | remoteSearch      | 是否开启自定义搜索 (远程搜索)| boolean           |    true / false   |    false    |
-| remoteMethod      | 自定义搜索回调函数 | function(val, cb)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data          |    -    |    -    |
+| remoteMethod      | 自定义搜索回调函数 | function(val, cb, show)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态         |    -    |    -    |
 | direction         | 下拉方向| string           |    auto / up / down   |    auto    |
 | style             | 自定义样式| object           |    -   |    { }    |
 | height            | 默认最大高度| string           |    -   |    200px   |
@ -36,6 +36,7 @@
 | maxMethod         | 达到选中上限的回到 | function(sels, item), sels: 已选中数据, item: 当前选中的值  |   -  |    -    |
 | name              | 表单提交时的name  |  string  |   -  |    select    |
 | toolbar           | 工具条, 具体看下表  |  object  |   -  |    -    |
+| showCount         | 展示在下拉框中的最多选项数量  |  int  |   -  |    0    |


 ### prop
@ -45,7 +46,9 @@
 | name        | 显示名称      | string     |    -    |    name      |
 | value       | 选中值        | string     |    -    |    value     |
 | selected    | 是否选中      | string     |    -    |    selected      |
-| disabled    | 是否警用      | string     |    -    |    disabled      |
+| disabled    | 是否禁用      | string     |    -    |    disabled      |
+| children    | 分组children | string     |    -    |    children      |
+| optgroup    | 分组optgroup | string     |    -    |    optgroup      |


 ### theme
--- a/docs/router.js
+++ b/docs/router.js
@ -46,25 +46,27 @@ export default [{
 		redirect: '/example/XM01',
 		component: Component,
 		children: [
-            { path: '/example/XM01', name: '基础使用', component: importMd('/XM01') },
-            { path: '/example/XM02', name: '国际化', component: importMd('/XM02') },
-            { path: '/example/XM03', name: '默认选中', component: importMd('/XM03') },
-            { path: '/example/XM04', name: '修改提示', component: importMd('/XM04') },
-            { path: '/example/XM05', name: '搜索模式', component: importMd('/XM05') },
-            { path: '/example/XM06', name: '下拉方向', component: importMd('/XM06') },
-            { path: '/example/XM07', name: '自定义样式', component: importMd('/XM07') },
-            { path: '/example/XM08', name: '分页', component: importMd('/XM08') },
-            { path: '/example/XM09', name: '单选', component: importMd('/XM09') },
-            { path: '/example/XM10', name: '重复选', component: importMd('/XM10') },
-            { path: '/example/XM11', name: '自定义属性', component: importMd('/XM11') },
-            { path: '/example/XM12', name: '主题', component: importMd('/XM12') },
-            { path: '/example/XM13', name: '显示与隐藏', component: importMd('/XM13') },
-            { path: '/example/XM14', name: '显示方式', component: importMd('/XM14') },
-            { path: '/example/XM15', name: '构建选项', component: importMd('/XM15') },
-            { path: '/example/XM16', name: '监听选择', component: importMd('/XM16') },
-            { path: '/example/XM17', name: '性能测试', component: importMd('/XM17') },
-            { path: '/example/XM18', name: '多选上限', component: importMd('/XM18') },
-            { path: '/example/XM19', name: '工具条', component: importMd('/XM19') },
+            { path: '/example/XM01', name: 'Base 基础使用', component: importMd('/XM01') },
+            { path: '/example/XM02', name: 'Language 国际化', component: importMd('/XM02') },
+            { path: '/example/XM03', name: 'InitValue 默认选中', component: importMd('/XM03') },
+            { path: '/example/XM04', name: 'Tips 修改提示', component: importMd('/XM04') },
+            { path: '/example/XM05', name: 'Filterable 搜索模式', component: importMd('/XM05') },
+            { path: '/example/XM06', name: 'Direction 下拉方向', component: importMd('/XM06') },
+            { path: '/example/XM07', name: 'Style 自定义样式', component: importMd('/XM07') },
+            { path: '/example/XM08', name: 'Paging 分页', component: importMd('/XM08') },
+            { path: '/example/XM09', name: 'Radio 单选', component: importMd('/XM09') },
+            { path: '/example/XM10', name: 'Repeat 重复选', component: importMd('/XM10') },
+            { path: '/example/XM11', name: 'Prop 自定义属性', component: importMd('/XM11') },
+            { path: '/example/XM12', name: 'Theme 主题', component: importMd('/XM12') },
+            { path: '/example/XM13', name: 'Show 显示与隐藏', component: importMd('/XM13') },
+            { path: '/example/XM14', name: 'Model 显示方式', component: importMd('/XM14') },
+            { path: '/example/XM15', name: 'Template 构建选项', component: importMd('/XM15') },
+            { path: '/example/XM16', name: 'On 监听选择', component: importMd('/XM16') },
+            { path: '/example/XM17', name: 'Test 性能测试', component: importMd('/XM17') },
+            { path: '/example/XM18', name: 'Max 多选上限', component: importMd('/XM18') },
+            { path: '/example/XM19', name: 'Toolbar 工具条', component: importMd('/XM19') },
+            { path: '/example/XM20', name: 'ShowCount 选项数量', component: importMd('/XM20') },
+            { path: '/example/XM21', name: 'Optgroup 分组', component: importMd('/XM21') },
        ]
 	}, {
 		path: '/example-custom',
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {
--- a/src/components/common/util.js
+++ b/src/components/common/util.js
@ -118,9 +118,9 @@ export function checkUserAgent() {
 }

 export function IEVersion() {
-    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
-    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
-    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
+    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
+    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
@ -140,8 +140,32 @@ export function IEVersion() {
    } else if (isEdge) {
        return 'edge'; //edge
    } else if (isIE11) {
-        return 11; //IE11  
+        return 11; //IE11
    } else {
        return -1; //不是ie浏览器
    }
 }
+
+export function filterGroupOption(arr, data, prop){
+    const { children, optgroup } = prop;
+    data.filter(item => !item[optgroup]).forEach(item => {
+        let child = item[children];
+        if(isArray(child)){
+            filterGroupOption(arr, child, children, optgroup);
+        }else{
+            arr.push(item);
+        }
+    });
+}
+
+export function findSelected(arr, data, prop){
+    const { selected, children, optgroup } = prop;
+    data.filter(item => !item[optgroup]).forEach(item => {
+        let child = item[children];
+        if(isArray(child)){
+            findSelected(arr, child, prop);
+        }else{
+            item[selected] && (arr.push(item));
+        }
+    });
+}
--- a/src/components/config/options.js
+++ b/src/components/config/options.js
@ -53,6 +53,8 @@ export default function (lan = 'zn') {
        //多选上限
        max: 0,
        maxMethod: function(sels, item){},
+        //选项显示数量
+        showCount: 0,
        //工具条
        toolbar: {
            show: false,
@ -65,6 +67,8 @@ export default function (lan = 'zn') {
 			value: 'value',
 			selected: 'selected',
 			disabled: 'disabled',
+            children: 'children',
+            optgroup: 'optgroup',
 		},
 		//主题配置
 		theme: {
--- a/src/components/element/framework.js
+++ b/src/components/element/framework.js
@ -1,5 +1,5 @@
 import { h, Component, render } from '@/components/preact'
-import { checkUserAgent, isFunction, toNum } from '@/components/common/util'
+import { checkUserAgent, isFunction, toNum, filterGroupOption, findSelected, mergeArr } from '@/components/common/util'

 //渲染类
 import Tips from './tips';
@ -24,10 +24,15 @@ class Framework extends Component{
        //用于多选上限的边框颜色变化
        this.updateBorderColor('');
 		this.resetDate(props.data);
-		let selected = props.prop.selected;
-		this.value(props.initValue ? props.initValue : this.state.data.filter(item => item[selected]), false);
+		this.value(props.initValue ? props.initValue : this.findValue(this.state.data), false);
 	}

+    findValue(data){
+        let list = [];
+        findSelected(list, data, this.props.prop);
+        return list;
+    }
+
 	resetDate(data = []){
 		this.setState({ data });
 	}
@ -36,8 +41,11 @@ class Framework extends Component{
 		let data = this.state.data;
 		let value = this.props.prop.value;
 		let direction = this.props.direction;
+
+        let list = [];
+        filterGroupOption(list, data, this.props.prop);
 		this.setState({
-			sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a),
+			sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => list.find(item => item[value] == val)).filter(a => a),
 			//下拉框是否展开
 			show,
 			//下拉方向
@ -53,7 +61,7 @@ class Framework extends Component{
 	onReset(data, type){
        //重置数据
        if(type === 'data'){
-            this.resetDate(data);
+            this.setState({ sels: mergeArr(this.findValue(data), this.state.sels, this.props.prop), data });
        }else
        //重置选中数据
        if(type === 'sels'){
--- a/src/components/element/model/general.js
+++ b/src/components/element/model/general.js
@ -1,5 +1,5 @@
 import { h, Component, render } from '@/components/preact'
-import { isFunction, safety, mergeArr, IEVersion } from '@/components/common/util'
+import { isFunction, isArray, safety, mergeArr, IEVersion, filterGroupOption } from '@/components/common/util'

 /**
 * 普通的多选渲染
@ -111,9 +111,9 @@ class General extends Component{

 		let { data, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips } = config

-		const { name, value, disabled } = prop;
+		const { name, value, disabled, children, optgroup } = prop;

-		let arr = data;
+		let arr = safety(data);
 		//是否开启了搜索
 		if(filterable){
 			if(remoteSearch){//是否进行远程搜索
@ -127,10 +127,34 @@ class General extends Component{

 						this.setState({ loading: false });
 						this.props.onReset(result, 'data');
-					});
+					}, this.props.show);
 				}
 			}else{
-				arr = data.filter((item, index) => filterMethod(this.state.filterValue, item, index, prop));
+                const filterData = (item, index) => {
+                    const isGroup = item[optgroup];
+                    if(isGroup){
+                        return true;
+                    }
+                    const child = item[children];
+                    if(isArray(child) && child.length > 0){//分组模式
+                        item[children] = child.filter(filterData);
+                        return item[children].length != 0;
+                    }
+                    return filterMethod(this.state.filterValue, item, index, prop);
+                }
+				arr = arr.filter(filterData);
+
+                for(let i = 0; i < arr.length - 1; i++){
+                    let a = arr[i];
+                    let b = arr[i + 1];
+                    if(a[optgroup] && (b[optgroup] || isArray(b[children]))){
+                        arr[i].__del = true;
+                    }
+                }
+                if(arr.length && arr[arr.length - 1][optgroup]){
+                    arr[arr.length - 1].__del = true;
+                }
+                arr = arr.filter(item => !item.__del);
 			}
 		}

@ -177,10 +201,10 @@ class General extends Component{
 			this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
 			this.state.pageIndex == size && (nextStyle = disabledStyle);

-			const defaultCurrClass = {
-				position: 'relative',
-				borderRadius: '1px',
-			}
+			// const defaultCurrClass = {
+			// 	position: 'relative',
+			// 	borderRadius: '1px',
+			// }
 			// {
 			// 	''.padEnd(size, ' ').split('').map((s, i) => (
 			// 		<span style={
@ -201,7 +225,12 @@ class General extends Component{
 				</div>
 			)

-		}
+		}else{
+            //检查是否设置了显示数量上限
+            if(config.showCount > 0){
+                arr = arr.slice(0, config.showCount);
+            }
+        }

        let safetyArr = safety(arr);
        //工具条操作
@ -212,12 +241,14 @@ class General extends Component{

                    let info;
                    if(tool === 'ALL'){
-                        info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (data) => {
-                            this.props.onReset(mergeArr(data, sels, prop), 'sels');
+                        info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (pageData) => {
+                            const list = [];
+                            filterGroupOption(list, pageData, prop);
+                            this.props.onReset(mergeArr(list.filter(item => !item[prop.disabled]), sels, prop), 'sels');
                        } };
                    }else if(tool === 'CLEAR'){
-                        info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (data) => {
-                            this.props.onReset([], 'sels');
+                        info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (pageData) => {
+                            this.props.onReset(sels.filter(item => item[prop.disabled]), 'sels');
                        } };
                    }else {
                        info = tool
@ -238,27 +269,47 @@ class General extends Component{
            </div>
        )

+        const renderItem = item => {
+            const selected = !!sels.find(sel => sel[value] == item[value])
+            const iconStyle = selected ? {
+            	color: theme.color,
+            	border: 'none',
+            	fontSize: '18px'
+            } : {
+            	borderColor: theme.color,
+            };
+            const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
+            const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');

-		arr = arr.map(item => {
+            return (
+            	<div class={ className } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
+            		<i class={ iconClass } style={ iconStyle }></i>
+            		<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
+            	</div>
+            )
+        }
+        const renderGroup = item => {
+            const isGroup = item[optgroup];
+            if(isGroup){//分组模式
+                return (
+                    <div class="xm-group">
+                        <div class="xm-group-item">{ item[name] }</div>
+                    </div>
+                )
+            }

-			const selected = !!sels.find(sel => sel[value] == item[value])
-			const iconStyle = selected ? {
-				color: theme.color,
-				border: 'none',
-				fontSize: '18px'
-			} : {
-				borderColor: theme.color,
-			};
-			const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' ');
-			const iconClass = ['xm-option-icon xm-iconfont', radio ? 'xm-icon-danx' : 'xm-icon-duox'].join(' ');
-
-			return (
-				<div class={className} value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled]) }>
-					<i class={ iconClass } style={ iconStyle }></i>
-					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>
-				</div>
-			)
-		})
+            const child = item[children];
+            if(isArray(child) && child.length > 0){//分组模式
+                return (
+                    <div class="xm-group">
+                        <div class="xm-group-item">{ item[name] }</div>
+                        { child.map(renderItem) }
+                    </div>
+                )
+            }
+            return renderItem(item);
+        }
+		arr = arr.map(renderGroup);

 		if(!arr.length){
 			arr.push(
--- a/src/style/index.less
+++ b/src/style/index.less
@ -189,6 +189,15 @@ xm-select{
 			bottom: 42px;
 		}

+        .xm-group{
+            &-item{
+                cursor: default;
+                padding: 0 10px;
+                color: #999;
+                font-size: 12px;
+            }
+        }
+
 		.xm-option{
 			display: flex;
 			align-items: center;
@ -375,7 +384,7 @@ xm-select{
 			pointer-events: none;
 		}
 	}
-    
+
    .xm-select-default{
        display: none !important;
    }