修复若干bug

CHANGELOG.md

@@ -1,5 +1,25 @@
 ## 更新日志
 
+### 1.2.0
+
+*2020-11-25*
+
+#### 新增
+
+- 单选图标自定义
+- 新增实例方法`getTreeValue`, 用于获取树结构下的父节点和半选节点
+- 新增实例方法`enable`, `disable`, 动态操作选项的启用禁用
+- 新增配置`layReqText`, 表单验证, 同`layui`的`lay-reqText`
+
+#### Bug fixes
+
+- 修复分页模式下的上一页下一页没有国际化
+- 修复远程分页时搜索过滤数据异常
+- 修改`update`方法无法更新远程
+- 修复tree模式下非严格模式搜索异常
+- 修复tree模式下工具条操作异常
+
+
 ### 1.1.9
 
 *2020-07-20*
@@ -7,6 +27,9 @@
 - 更新一下目录结构说明
 - 增加③群`1145047250`
 
+
+### 1.1.9
+
 *2020-05-04*
 
 #### 新增

docs/mds/ZP02.md

@@ -35,6 +35,10 @@ tree: {
 	<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
 	<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
 	<input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">
+	
+	<br/><br/>
+	<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
+	<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
 </div>
 
 <div style="margin-top: 20px">间距</div>
@@ -54,6 +58,34 @@ layui.form.render();
 	});
 })
 
+//控制显示父节点的图标
+layui.form.on('checkbox(hidden)', function(data){
+	demo1.update({
+		iconfont: {
+			parent: data.elem.checked ? 'hidden' : '',
+		}
+	})
+});
+
+//自定义图标
+layui.form.on('checkbox(custom)', function(data){
+	let iconfont = data.elem.checked ? {
+		select: 'layui-icon layui-icon-chart',
+		unselect: 'layui-icon-ok-circle',
+		half: 'layui-icon layui-icon-table',
+		parent: 'layui-icon layui-icon-survey',
+	} : {
+		select: '',
+		unselect: '',
+		half: '',
+		parent: '',
+	}
+	demo1.update({
+		iconfont: iconfont
+	})
+	layui.form.render();
+});
+
 layui.slider.render({
 	elem: '#slideTest1',
 	min: 10,
@@ -88,7 +120,7 @@ var demo1 = xmSelect.render({
 	},
 	filterable: true,
 	height: 'auto',
-	data(){
+	data: function(){
 		return [
 			{name: '销售员', value: -1, disabled: true, children: [
 				{name: '张三1', value: 1, selected: true, children: []},

docs/mds/ZP06.md

@@ -9,7 +9,7 @@ cascader: {
 	//是否显示级联模式
 	show: true,
 	//间距
-	indent: 100,
+	indent: 200,
 	//是否严格遵守父子模式
 	strict: true,
 },
@@ -24,6 +24,8 @@ cascader: {
 <br/>
 <div class="layui-form">
 	<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
+	<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
+	<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
 </div>
 
 <div style="margin-top: 20px">间距</div>
@@ -36,7 +38,7 @@ var demo1 = xmSelect.render({
 	autoRow: true,
 	cascader: {
 		show: true,
-		indent: 100,
+		indent: 200,
 	},
 	height: '200px',
 	data(){
@@ -72,14 +74,42 @@ layui.form.render();
 	});
 })
 
+//控制显示父节点的图标
+layui.form.on('checkbox(hidden)', function(data){
+	demo1.update({
+		iconfont: {
+			parent: data.elem.checked ? 'hidden' : '',
+		}
+	})
+});
+//自定义图标
+layui.form.on('checkbox(custom)', function(data){
+	let iconfont = data.elem.checked ? {
+		select: 'layui-icon layui-icon-chart',
+		unselect: 'layui-icon-ok-circle',
+		half: 'layui-icon layui-icon-table',
+		parent: 'layui-icon layui-icon-survey',
+	} : {
+		select: '',
+		unselect: '',
+		half: '',
+		parent: '',
+	}
+	demo1.update({
+		iconfont: iconfont
+	})
+	layui.form.render();
+});
+
+
 layui.slider.render({
 	elem: '#slideTest1',
 	min: 50,
-	max: 300,
+	max: 400,
 	showstep: true,
 	input: true,
 	tips: true,
-	value: 100,
+	value: 200,
 	change: function(value){
 		demo1.update({
 			cascader: {

docs/mds/ZTEST.md

@@ -8,29 +8,43 @@
 var demo1 = xmSelect.render({
 	el: '#demo1', 
 	autoRow: true,
-	toolbar: { show: true },
-	paging: true,
-	pageRemote: true,
 	filterable: true,
-	remoteSearch: true,
+	tree: {
-	remoteMethod: function(val, cb, show){
+		show: true,
-		//这里如果val为空, 则不触发搜索
+		showFolderIcon: true,
-		/* if(!val){
+		showLine: true,
-			return cb([]);
+		indent: 20,
-		} */
+		expandedKeys: [ -3 ],
-		//这里引入了一个第三方插件axios, 相当于$.ajax
+	},
-		axios({
+	toolbar: {
-			method: 'get',
+		show: true,
-			url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+		list: ['ALL', 'REVERSE', 'CLEAR']
-			params: {
+	},
-				keyword: val,
+	filterable: true,
-			}
+	height: 'auto',
-		}).then(response => {
+	data(){
-			var res = response.data;
+		return [
-			cb(res.data, 80)
+			{name: '销售员', value: -1, disabled: true, children: [
-		}).catch(err => {
+				{name: '张三1', value: 1, selected: true, children: []},
-			cb([]);
+				{name: '李四1', value: 2, selected: true},
-		});
+				{name: '王五1', value: 3, disabled: true},
+			]},
+			{name: '奖品', value: -2, children: [
+				{name: '奖品3', value: -3, children: [
+					{name: '苹果3', value: 14, selected: true},
+					{name: '香蕉3', value: 15},
+					{name: '葡萄3', value: 16},
+				]},
+				{name: '苹果2', value: 4, selected: true, disabled: true},
+				{name: '香蕉2', value: 5},
+				{name: '葡萄2', value: 6},
+			]},
+		]
+	},
+	iconfont: {
+		select: '',
+		unselect: '',
+		half: '',
 	},
 })
 

docs/mds/options.md

@@ -5,19 +5,19 @@
 
 | 参数				| 说明							| 类型			| 可选值			| 默认值		|
 | ----------------- | ----------------------------- | ------------- | ------------- | --------- |
-| el				| 渲染对象, css选择器, dom元素		| string		|	-			|	-	  	|
+| el				| 渲染对象, css选择器, dom元素	| string		|	-			|	-	  	|
 | language			| 语言选择						| string		|	zn / en		|	zn		|
 | data				| 显示的数据						| array			|	-			|	[ ]		|
 | content			| 自定义下拉框html				| string		|	-			|	-		|
-| initValue			| 初始化选中的数据, 需要在data中存在 | array			|	-			|	null	|
+| initValue			| 初始化选中的数据, 需要在data中存在 | array		|	-			|	null	|
-| tips				| 默认提示, 类似于placeholder		| string		|	-			|	请选择	|
+| tips				| 默认提示, 类似于placeholder	| string		|	-			|	请选择	|
 | empty				| 空数据提示						| string		|	-			|	暂无数据	|
 | filterable		| 是否开启搜索					| boolean		| true / false	|	false	|
 | searchTips		| 搜索提示						| string		|	-			|	请选择	|
-| delay				| 搜索延迟 ms						| int			|	-			|	500		|
+| delay				| 搜索延迟 ms					| int			|	-			|	500		|
 | filterMethod		| 搜索回调函数					| function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key		   |	-	|	-	|
 | filterDone		| 搜索完成函数					| function(val, list)  val: 当前搜索值, list: 过滤后的数据		   |	-	|	-	|
-| remoteSearch		| 是否开启自定义搜索 (远程搜索)		| boolean		| true / false	|	false	|
+| remoteSearch		| 是否开启自定义搜索 (远程搜索)	| boolean		| true / false	|	false	|
 | remoteMethod		| 自定义搜索回调函数				| function(val, cb, show, pageIndex)  val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码		 |	-	|	-	|
 | direction			| 下拉方向						| string 		|	auto / up / down | auto	|
 | style				| 自定义样式						| object		|	-   		| { }		|
@@ -25,30 +25,32 @@
 | paging			| 是否开启自定义分页				| boolean		| true / false	| false		|
 | pageSize			| 分页条数						| int		   	|	-   		| 10		|
 | pageEmptyShow		| 分页无数据是否显示				| boolean		| true / false	| true		|
-| pageRemote		| 是否开启远程分页					| boolean		| true / false	| true		|
+| pageRemote		| 是否开启远程分页				| boolean		| true / false	| true		|
-| radio				| 是否开启单选模式					| boolean		| true / false	| false		|
+| radio				| 是否开启单选模式				| boolean		| true / false	| false		|
 | repeat			| 是否开启重复性模式				| boolean		| true / false	| false		|
-| clickClose		| 是否点击选项后自动关闭下拉框		| boolean		| true / false	| false		|
+| clickClose		| 是否点击选项后自动关闭下拉框	| boolean		| true / false	| false		|
 | prop				| 自定义属性名称, 具体看下表		| object		|   - 			|			|
-| theme				| 主题配置, 具体看下表				| object		|   -  			|			|
+| theme				| 主题配置, 具体看下表			| object		|   -  			|			|
-| model				| 模型, 多选的展示方式, 具体见下表 	| object		|   -  			|			|
+| model				| 模型, 多选的展示方式, 具体见下表 	| object	|   -  			|			|
+| iconfont			| 自定义选中图标 				| object		|   -  			|			|
 | show				| 展开下拉的回调					| function		|   -  			|	-		|
 | hide				| 隐藏下拉的回调					| function		|   - 			|	-		|
 | template			| 自定义渲染选项					| function({ item, sels, name, value })  |   -  |	-	|
 | on				| 监听选中变化					| function({ arr, change, isAdd })  |   -  |	-	|
-| max				| 设置多选选中上限					| int  			|   -  			|	0		|
+| max				| 设置多选选中上限				| int  			|   -  			|	0		|
 | maxMethod			| 达到选中上限的回到				| function(sels, item), sels: 已选中数据, item: 当前选中的值  |   -  |	-	|
 | name				| 表单提交时的name			 	|  string  		|   -  			|	select	|
-| layVerify			| 表单验证, 同layui的lay-verify  	|  string  		|   - 			|	''		|
+| layVerify			| 表单验证, 同layui的lay-verify 	|  string  		|   - 			|	''		|
-| layVerType		| 表单验证, 同layui的lay-verType  |  string  		|   -  			|	''		|
+| layVerType		| 表单验证, 同layui的lay-verType	|  string  		|   -  			|	''		|
+| layReqText		| 表单验证, 同layui的lay-reqText	|  string  		|   -  			|	''		|
 | toolbar			| 工具条, 具体看下表			 	|  object  		|   -  			|	-		|
-| showCount			| 展示在下拉框中的最多选项数量	 	|  int  		|   - 		 	|	0		|
+| showCount			| 展示在下拉框中的最多选项数量	|  int  		|   - 		 	|	0		|
-| autoRow			| 是否开启自动换行(选项过多时)	 	|  boolean  	| true / false  |	false	|
+| autoRow			| 是否开启自动换行(选项过多时)	|  boolean  	| true / false  |	false	|
 | size				| 尺寸						 	|  string  		| large / medium / small / mini  |	medium	|
 | disabled			| 是否禁用多选				 	|  boolean		| true / false	|	false	|
 | create			| 创建条目					 	|  function(val, data), val: 搜索的数据, data: 当前下拉数据		   |	-   |	null	|
-| tree				| 树形结构, 具体看下表			 	|  object		|	-  			|	-		|
+| tree				| 树形结构, 具体看下表			|  object		|	-  			|	-		|
-| cascader			| 级联结构, 具体看下表			 	|  object		|	-  			|	-		|
+| cascader			| 级联结构, 具体看下表			|  object		|	-  			|	-		|
 
 
 ### prop
@@ -56,7 +58,7 @@
 | 参数			| 说明						| 类型		 | 可选值 	| 默认值 		|
 | ------------- | ------------------------- | ---------- | -------- | ------------- |
 | name			| 显示名称					| string	 |	-		|	name		|
-| value	   		| 选中值, 当前多选唯一			| string	 |	-		|	value	 	|
+| value	   		| 选中值, 当前多选唯一		| string	 |	-		|	value	 	|
 | selected		| 是否选中	 			 	| string	 |	-		|	selected	|
 | disabled		| 是否禁用	  				| string	 |	-		|	disabled	|
 | children		| 分组children		 		| string	 |	-		|	children	|
@@ -137,13 +139,24 @@ model: {
 ```
 
 
+### iconfont
+
+| 参数		 | 说明	 							 						| 类型		 | 可选值  		| 默认值		|
+| ---------- | -------------------------------------------------------- | ---------- | ------------ | ---------	|
+| select	 | 选中图标  										 		| string	 | -			| - 		|
+| unselect	 | 非选中图标 												| string	 | -			| - 		|
+| half		 | 半选图标													| string	 | -		 	| - 		|
+| parent	 | 父节点图标, 值为hidden时, 隐藏							| string	 | -		 	| - 		|
+
+
+
 ### toolbar
 
 | 参数		 | 说明	 							 						| 类型		 | 可选值  		| 默认值			 	 |
 | ---------- | -------------------------------------------------------- | ---------- | ------------ | ------------------ |
 | show		 | 是否展示工具条  										 	| boolean	 | true / false	| false				 |
 | showIcon	 | 是否显示工具图标 											| boolean	 | true / false	| true   			 |
-| list		 | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选	| array	   	 |	-			| [ "ALL", "CLEAR" ] |
+| list		 | 工具条数组 (默认有 全选/清空, 可以自定义), 还有 REVERSE:反选	| array	 | ALL, CLEAR, REVERSE | [ "ALL", "CLEAR" ] |
 
 > 自定义方式
 
@@ -175,6 +188,7 @@ list: [ "ALL", "CLEAR",
 | expandedKeys 		| 默认展开的节点数组, 为true时展开所有节点	| array / boolean |	- | [ ]	 |
 | strict 			| 是否遵循严格父子结构	 	| boolean	 	| true / false	| true	 |
 | simple 			| 是否开启极简模式	 		| boolean	 	| true / false	| false	 |
+| nodeType 			| 标注节点类型的key	 		| string	 	| leaf: 叶子节点, parent: 父节点, half: 半选节点	| __node_type	 |
 
 
 ### cascader
@@ -236,3 +250,6 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
 | reset  	| 重置为上一次的render状态 	| - 				|
 | update  	| 更新多选选中, reset不保留 	| (options: 见配置项) |
 | warning  	| 警告 						| (color: 默认同theme.maxColor, sustain: 是否持续显示) |
+| getTreeValue  | 树节点模式下获取数据, v1.2.0 新增	| (leafOnly: 是否只是叶子节点，默认值为 false, includeHalfChecked: 是否包含半选节点，默认值为 false) |
+| enable  	| 启用选项, disabled=false, v1.2.0 新增	| (array: 想要启用的选项数组) |
+| disable  	| 禁用用选项, disabled=true, v1.2.0 新增	| (array: 想要禁用的选项数组) |

docs/router.js

@@ -25,7 +25,7 @@ export default [{
 		component: importVue('/changelog'),
 	}, {
 		path: '/add',
-		name: 'QQ群: 660408068',
+		name: 'QQ群: 1145047250',
 		redirect: '/',
 	}, {
 		path: '/component',

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.1.9",
+	"version": "1.2.0",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {

src/components/framework/index.js

@@ -56,6 +56,36 @@ class Framework extends Component{
 		return sels;
 	}
 
+	upDate(sels, enable){
+		let { dataObj } = this.state;
+		let { prop, tree, cascader } = this.props;
+		let { value, disabled, children } = prop;
+		sels.map(sel => dataObj[typeof sel === 'object' ? sel[value] : sel]).filter(a => a).forEach(item => {
+			item[disabled] = !enable
+
+			//严格模式下操作
+			if(tree.strict || cascader.strict){
+				if(enable){//启用父节点, 向上父节点启用
+					let parent = item
+					while(parent){
+						parent[disabled] = false;
+						parent = parent.__node.parent
+					}
+				}
+				//启用禁用节点 子节点启用禁用
+				const upChild = (parent) => {
+					parent[disabled] = !enable
+					let child = parent[children];
+					if(child && isArray(child)){
+						child.forEach(c => upChild(c))
+					}
+				}
+				upChild(item);
+			}
+		})
+		this.setState({ dataObj })
+	}
+
 	exchangeValue(arr, dataObj = this.state.dataObj){
 		let list = arr.map(sel => typeof sel === 'object' ? { ...sel, __node: {} } : dataObj[sel]).filter(a => a)
 		let filterGroup = true, { tree } = this.props;
@@ -71,14 +101,19 @@ class Framework extends Component{
 			show = this.state.show;
 		}
 
-		const { prop, tree } = this.props;
+		const { prop, tree, cascader } = this.props;
 		let changeData = this.exchangeValue(sels);
-		if(tree.show && tree.strict){
+
+		//检测是否超选了
+		if(this.checkMax(changeData, changeData)){
+			return ;
+		}
+
+		if(tree.show && tree.strict || cascader.show && cascader.strict){
 			let data = this.state.data;
 			this.clearAndReset(data, changeData);
 			changeData = this.init({ data, prop }, true);
 		}
-
 		this.resetSelectValue(changeData, changeData, true, listenOn);
 		this.setState({ show })
 	}
@@ -148,7 +183,7 @@ class Framework extends Component{
 		this.setState({ tmpColor });
 	}
 
-	treeHandler(sels, parent, change, type){
+	treeHandler(sels, parent, change, type, changeStatus){
 		const { value, selected, disabled, children, optgroup } = this.props.prop;
 		let child = parent[children];
 		child.filter(item => !(item[disabled] || item.__node.disabled)).forEach(item => {
@@ -169,37 +204,61 @@ class Framework extends Component{
 				}
 			}
 		})
-		let len = child.length;
+		if(changeStatus){
-		let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
+			let len = child.length;
-		parent.__node.selected = slen === len;
+			let slen = child.filter(i => sels.findIndex(sel => sel[value] === i[value]) !== -1 || i.__node.selected === true).length;
-		parent.__node.half = slen > 0 && slen < len;
+			parent.__node.selected = slen === len;
+			parent.__node.half = slen > 0 && slen < len;
+		}
+	}
+
+	checkMax(item, sels){
+		const { max, maxMethod, theme } = this.props
+		//查看是否设置了多选上限
+		let maxCount = toNum(max);
+		if(maxCount > 0 && sels.length >= maxCount){
+			this.updateBorderColor(theme.maxColor);
+			//查看是否需要回调
+			maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
+			return true;
+		}
 	}
 
 	//选项, 选中状态, 禁用状态, 是否强制删除:在label上点击删除
 	itemClick(item, itemSelected, itemDisabled, mandatoryDelete){
 
 		const { theme, prop, radio, repeat, clickClose, max, maxMethod, tree } = this.props
-		let { sels } = this.state
+		let sels = [ ...this.state.sels ]
 		const { value, selected, disabled, children, optgroup } = prop
 
 		//如果是禁用状态, 不能进行操作
 		if(itemDisabled) return;
 
 		if(item[optgroup] && tree.strict){
-			let child = item[children], change = [], isAdd = true;
+			let child = item[children], change = [], isAdd = true, handlerType;
 			if(item.__node.selected){
-				this.treeHandler(sels, item, change, 'del');
+				handlerType = 'del';
 				isAdd = false;
 			}else if(item.__node.half){
-				this.treeHandler(sels, item, change, 'half');
+				handlerType = 'half';
+				this.treeHandler(sels, item, change, handlerType);
 				//无法操作禁用状态, 变成取消操作
 				if(change.length === 0){
-					this.treeHandler(sels, item, change, 'del');
+					handlerType = 'del';
 					isAdd = false;
 				}
 			}else{
-				this.treeHandler(sels, item, change, 'add');
+				handlerType = 'add';
 			}
+			if(handlerType != 'half'){
+				this.treeHandler(sels, item, change, handlerType);
+			}
+			if(this.checkMax(change, change)){
+				return ;
+			}
+			sels = [ ...this.state.sels ], change = [];
+			this.treeHandler(sels, item, change, handlerType, true);
+
 			this.resetSelectValue(sels, change, isAdd);
 			this.setState({ data: this.state.data })
 		}else{
@@ -212,11 +271,7 @@ class Framework extends Component{
 				}
 			}else{
 				//查看是否设置了多选上限
-				let maxCount = toNum(max);
+				if(this.checkMax(item, sels)){
-				if(maxCount > 0 && sels.length >= maxCount){
-					this.updateBorderColor(theme.maxColor);
-					//查看是否需要回调
-					maxMethod && isFunction(maxMethod) && maxMethod(sels, item);
 					return ;
 				}
 
@@ -395,7 +450,13 @@ class Framework extends Component{
 
 		return (
 			<xm-select { ...xmSelectProps } >
-				<input class="xm-select-default" lay-verify={ config.layVerify } lay-verType={ config.layVerType } name={ config.name } value={ sels.map(item => item[prop.value]).join(',') }></input>
+				<input class="xm-select-default" 
+					lay-verify={ config.layVerify } 
+					lay-verType={ config.layVerType } 
+					lay-reqText={ config.layReqText }
+					name={ config.name } 
+					value={ sels.map(item => item[prop.value]).join(',') }
+				></input>
 				<i class={ show ? 'xm-icon xm-icon-expand' : 'xm-icon' } />
 				{ sels.length === 0 && <div class="xm-tips">{ config.tips }</div> }
 				<Label { ...labelProps } ref={ ref => this.labelView = ref } />

src/components/plugin/cascader.js

@@ -81,18 +81,28 @@ class Cascader extends Component{
 				borderColor: theme.color,
 			};
 
+			const isParent = item[children] && item[children].length > 0;
 			const itemStyle = { backgroundColor: 'transparent' }
 			const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
-			const iconClass = ['xm-option-icon', (() => {
+			const iconClass = (() => {
-				//如果是半选状态，但是没有配置半选图标就用默认的
+				if(isParent && config.iconfont.parent === 'hidden'){
-				if(half){
+					return 'xm-option-icon-hidden'
-					return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
 				}
-				if(selected){
+				return ['xm-option-icon', (() => {
-					return config.iconfont.select ? config.iconfont.select : 0;
+					//如果是半选状态，但是没有配置半选图标就用默认的
-				}
+					if(half){
-				return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
+						return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
-			})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
+					}
+					if(isParent && config.iconfont.parent){
+						return config.iconfont.parent + ' xm-custom-icon';
+					}
+					if(selected){
+						return config.iconfont.select ? config.iconfont.select : 0;
+					}
+					return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
+				})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : cascader.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
+			})()
+
 
 			if(item[value] === this.state.val){
 				itemStyle.backgroundColor = theme.hover

src/components/plugin/general.js

@@ -182,6 +182,9 @@ class General extends Component{
 			}
 			let val = data[index][value];
 			this.setState({ val })
+			//键盘选中时滚动到可视范围内
+			let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
+			opt && opt.scrollIntoView(false)
 		}else
 		//Down 键
 		if(keyCode === 40){
@@ -192,6 +195,9 @@ class General extends Component{
 			}
 			let val = data[index][value];
 			this.setState({ val })
+			//键盘选中时滚动到可视范围内
+			let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
+			opt && opt.scrollIntoView(false)
 		}else
 		//Enter 键
 		if(keyCode === 13){

src/components/plugin/tree.js

@@ -137,27 +137,45 @@ class Tree extends Component{
 		}
 	}
 
-	filterData(data, val){
+	filterData(data, val, parentHidden){
 		const { prop, filterMethod, tree } = this.props;
 		const { children, optgroup, name, value } = prop;
+
 		data.forEach((item, index) => {
+			//首先判断父节点的状态是显示还是隐藏
+			let hiddenStatus = val ? !filterMethod(val, item, index, prop) : false;
+			//严格模式下, 不计算父节点的状态
+			let thisParentHidden;
+			if(tree.strict){
+				thisParentHidden = false;
+			}else{//非严格模式下, 父节点显示, 子节点无条件显示
+				thisParentHidden = parentHidden === false ? false : hiddenStatus;
+				hiddenStatus = thisParentHidden
+			}
+			//如果包含了子节点
 			if(item[optgroup]){
-				let child = this.filterData(item[children], val);
+				//过滤出来子节点的数据
-				item.__node.hidn = val ? child.filter(c => !c.__node.hidn).length === 0 : false;
+				let child = this.filterData(item[children], val, thisParentHidden);
-				if(!item.__node.hidn){
+				let childHiddenStatus = val ? child.filter(c => !c.__node.hidn).length === 0 : false;
+
+				//严格模式下子节点都隐藏了, 父节点也不显示
+				if(tree.strict){
+					hiddenStatus = childHiddenStatus;
+				}else{//非严格模式, 父节点没有搜索到, 看看子节点有没有显示的
+					hiddenStatus = thisParentHidden && childHiddenStatus;
+				}
+
+				if(!hiddenStatus){//如果是显示状态
 					let keys = this.state.expandedKeys;
 					if(val && keys.findIndex(key => key === item[value]) === -1){
 						keys.push(item[value]);
 						this.setState({ expandedKeys: keys })
 					}
-					return
-				}
-				if(tree.strict){
-					return
 				}
 			}
-			item.__node.hidn = val ? !filterMethod(val, item, index, prop) : false;
+			item.__node.hidn = hiddenStatus;
 		});
+
 		return data;
 	}
 
@@ -198,10 +216,10 @@ class Tree extends Component{
 	}
 
 	render(config, { expandedKeys }) {
-		let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips } = config;
+		let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips, iconfont } = config;
 		let { name, value, disabled, children, optgroup } = prop;
 
-		const showIcon = config.model.icon != 'hidden';
+		let showIcon = config.model.icon != 'hidden';
 		const renderItem = (item, indent, expand) => {
 			//是否被选中
 			let selected = !!sels.find(sel => sel[value] == item[value]);
@@ -236,16 +254,24 @@ class Tree extends Component{
 				dis && (itemStyle.backgroundColor = '#C2C2C2');
 			}
 			const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
-			const iconClass = ['xm-option-icon', (() => {
+			const iconClass = (() => {
-				//如果是半选状态，但是没有配置半选图标就用默认的
+				if(expand !== 0 && iconfont.parent === 'hidden'){
-				if(half){
+					return 'xm-option-icon-hidden'
-					return config.iconfont.half ? config.iconfont.half + ' xm-custom-icon' : 0;
 				}
-				if(selected){
+				return ['xm-option-icon', (() => {
-					return config.iconfont.select ? config.iconfont.select : 0;
+					//如果是半选状态，但是没有配置半选图标就用默认的
-				}
+					if(half){
-				return config.iconfont.unselect ? config.iconfont.unselect + ' xm-custom-icon' : 0;
+						return iconfont.half ? iconfont.half + ' xm-custom-icon' : 0;
-			})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
+					}
+					if(expand !== 0 && iconfont.parent){
+						return iconfont.parent + ' xm-custom-icon';
+					}
+					if(selected){
+						return iconfont.select ? iconfont.select : 0;
+					}
+					return iconfont.unselect ? iconfont.unselect + ' xm-custom-icon' : 0;
+				})() || ('xm-iconfont ' + (radio ? 'xm-icon-danx' : tree.strict && half ? 'xm-icon-banxuan' : 'xm-icon-duox'))].join(' ');
+			})()
 
 			const treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'xm-visible':'xm-hidden'].join(' ');
 
@@ -321,7 +347,18 @@ class Tree extends Component{
 
 		//工具条操作
 		function flat(list, array){
-			array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
+			//array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
+			array.forEach(item => {
+				if(item[optgroup]){
+					//非严格模式, 如果隐藏父节点, 证明不可选
+					if(!tree.strict && iconfont.parent !== 'hidden'){
+						list.push(item)
+					}
+					flat(list, item[children])
+				}else{
+					list.push(item)
+				}
+			})
 		}
 		const toolbar = (
 			<div class='xm-toolbar'>
@@ -333,7 +370,8 @@ class Tree extends Component{
 						info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
 							let list = [];
 							flat(list, pageData);
-							list = list.filter(item => !item[disabled])
+							//过滤掉禁用状态的不操作, 隐藏状态的不操作
+							list = list.filter(item => !item[disabled] && !item.__node.hidn)
 							this.props.onReset(radio ? list.slice(0, 1) : mergeArr(list, sels, prop), 'treeData');
 						} };
 					}else if(tool === 'CLEAR'){
@@ -344,7 +382,7 @@ class Tree extends Component{
 						info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
 							let list = [];
 							flat(list, pageData);
-							list = list.filter(item => !item[disabled])
+							list = list.filter(item => !item[disabled] && !item.__node.hidn)
 							let selectedList = [];
 							sels.forEach(item => {
 								let index = list.findIndex(pageItem => pageItem[value] === item[value]);

src/components/xm-select/index.js

@@ -162,6 +162,88 @@ class xmOptions {
 		return this;
 	}
 
+	/**
+	 * 获取选中的节点
+	 * leafOnly: 是否只是叶子节点，默认值为 false
+	 * includeHalfChecked: 是否包含半选节点，默认值为 false
+	 */
+	getTreeValue(leafOnly, includeHalfChecked){
+		const { tree, cascader, prop } = this.options;
+		const { value } = prop;
+
+		//如果不是树状结构, 直接使用getValue
+		if(!(tree.show || cascader.show)){
+			return this.getValue(leafOnly);
+		}
+
+		//获得当前已经选中的数据
+		let sels = childData[this.options.el].state.sels;
+
+		//存储选中的数据
+		let list = [];
+
+		let nodeType = tree.nodeType;
+
+		const listPush = (item, type) => {
+			if(!list.find(i => i[value] === item[value])){
+				item = { ...item }
+				item[nodeType] = type;
+				list.push(item);
+			}
+		}
+
+		for(let i = 0; i < sels.length; i++){
+			let node = { ...sels[i] };
+			//首页先把子节点放入到数据中
+			listPush(node, 'leaf');
+			while(node = node.__node.parent){
+				let { half, selected } = node.__node
+				//如果想要父节点, 检测父节点是否为选中状态
+				if(!leafOnly && selected){
+					listPush(node, 'parent');
+				}else
+				//如果是需要半选状态, 并且处于半选状态
+				if(includeHalfChecked && half && !selected){
+					listPush(node, 'half');
+				}
+			}
+		}
+
+		let arr = delProp(list, prop.children, [ '__node' ]);;
+
+		return arr;
+	}
+
+	/**
+	 * 动态启用一些选项
+	 */
+	enable(sels){
+		if(!isArray(sels)){
+			warn('请传入数组结构...')
+			return ;
+		}
+		if(sels.length === 0){
+			return ;
+		}
+		childData[this.options.el].upDate(sels, true)
+		return this;
+	}
+
+	/**
+	 * 动态禁用一些选项
+	 */
+	disable(sels){
+		if(!isArray(sels)){
+			warn('请传入数组结构...')
+			return ;
+		}
+		if(sels.length === 0){
+			return ;
+		}
+		childData[this.options.el].upDate(sels, false)
+		return this;
+	}
+
 }
 
 export default xmOptions;

src/config/options.js

@@ -21,6 +21,8 @@ export default function (lan = 'zn') {
 		layVerify: '',
 		//验证类型
 		layVerType: '',
+		//验证提示
+		layReqText: '',
 		//尺寸
 		size: 'medium',
 		//是否禁用多选
@@ -103,6 +105,8 @@ export default function (lan = 'zn') {
 			load: null,
 			//是否开启极简模式
 			simple: false,
+			//标注节点类型的key
+			nodeType: '__node_type',
 		},
 		//级联结构
 		cascader: {
@@ -157,6 +161,7 @@ export default function (lan = 'zn') {
 			select: '',
 			unselect: '',
 			half: '',
+			parent: '',
 		},
 		// 展开下拉框
 		show(){

src/style/index.less

@@ -243,6 +243,9 @@ xm-select{
 					color: unset;
 					border: unset;
 				}
+				&-hidden{
+					margin-right: -10px;
+				}
 			}
 			&-icon.xm-icon-danx{
 				border-radius: 100%;