修复tree模式下， 第一级为叶子节点的排版问题

docs/App.vue

@@ -43,7 +43,7 @@
 		},
 		watch: {
 			'$route.path'() {
-				// 触发伪滚动条更新
+				// 触发伪滚动条更新
 				this.componentScrollBox.scrollTop = 0;
 				this.$nextTick(() => {
 					this.componentScrollBar.update();

docs/entry.js

@@ -11,7 +11,7 @@ import VueRouter from 'vue-router';
 import routes from './router';
 import App from './App.vue';
 import demoBlock from './components/demo-block.vue';
-import './plugins'
+// import './plugins'
 
 Vue.use(ElementUI);
 Vue.use(VueRouter);

docs/mds/ZP01.md

@@ -67,9 +67,6 @@ layui.table.init('demo', {
 	}
 	
 })
-
-
-
 </script>
 ```
 :::

docs/mds/ZTEST.md

@@ -11,13 +11,13 @@ var demo1 = xmSelect.render({
 	paging: true,
 	pageSize: 2,
 	tree: {
-		strict: true,
+		strict: false,
-		show: false,
+		show: true,
 		showFolderIcon: true,
 		showLine: true,
 		indent: 20,
 		expandedKeys: [ -1 ],
-		lazy: true,
+		lazy: false,
 		load: function(item, cb){
 			setTimeout(function(){
 				var name = item.name + 1;
@@ -34,11 +34,7 @@ var demo1 = xmSelect.render({
 	height: 'auto',
 	data(){
 		return [
-			{name: '销售员', value: -1, selected: true, children: [
+			{name: '销售员', value: -1, selected: true},
-				{name: '张三1', value: 100, selected: false, children: []},
-				{name: '李四1', value: 2, selected: false},
-				{name: '王五1', value: 3, disabled: false},
-			]},
 			{name: '奖品', value: -2, children: [
 				{name: '奖品3', value: -3, children: [
 					{name: '苹果3', value: 14, selected: false},

docs/plugins/eleTree/eleTree.css

@@ -1,168 +0,0 @@
-/* #region tree */
-.eleTree{
-    position: relative;
-}
-.eleTree-hide,
-.eleTree-search-hide{
-    display: none;
-}
-.eleTree-loadData{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    top: 0px;
-}
-.eleTree-loadData .layui-icon{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%)  translateY(-50%);
-}
-.eleTree-node-content{
-    cursor: pointer;
-    height: 26px;
-    line-height: 1.3;
-    white-space: nowrap;
-}
-.eleTree-node-content:hover,
-.eleTree-node-content.eleTree-node-content-active{
-    background-color: #eee;
-}
-.eleTree-node-content-icon .layui-icon{
-    padding: 6px 3px;
-    color: #c0c4cc;
-    font-size: 12px;
-    display: inline-block;
-    transform: rotate(0deg);
-    transition: transform .3s ease-in-out;
-}
-.eleTree-node-content-icon .layui-icon.icon-rotate{
-    transform: rotate(90deg);
-}
-.eleTree-node-content .layui-form-checkbox[lay-skin=primary] i{
-    width: 13px;
-    height: 14px;
-    line-height: 1.3;
-}
-.eleTree-node-content-label{
-    padding-left: 5px;
-}
-.eleTree-node-content-input{
-    width: 80px;
-    border: 1px solid #e6e6e6;
-    outline: 0;
-    padding: 3px 5px;
-    font-size: 12px;
-}
-
-/* 线条样式 */
-.eleTree-node{
-    position: relative;
-}
-.eleTree-node .eleTree-node-verticalline{
-    position: absolute;
-    width: 0;
-    height: 100%;
-    border: 1px dotted #ccc;
-    z-index: 1;
-}
-.eleTree-node .eleTree-node-horizontalline{
-    position: absolute;
-    height: 0;
-    top: 13px;
-    border: 1px dotted #ccc;
-    z-index: 1;
-}
-
-/* checkbox第三种状态 */
-input.eleTree-hideen[type=checkbox]{
-    display: none;
-}
-.eleTree-checkbox {
-    height: auto!important;
-    line-height: normal!important;
-    min-height: 12px;
-    border: none!important;
-    margin-right: 0;
-    padding-left: 18px;
-    position: relative;
-    display: inline-block;
-}
-.eleTree-checkbox i {
-    left: 0;
-    border: 1px solid #d2d2d2;
-    font-size: 12px;
-    border-radius: 2px;
-    background-color: #fff;
-    -webkit-transition: .1s linear;
-    transition: .1s linear;
-    position: absolute;
-    top: 0;
-    color: #fff;
-    cursor: pointer;
-    text-align: center;
-    width: 13px;
-    height: 14px;
-    line-height: 1.3;
-}
-.eleTree-checkbox i:hover {
-    border-color: #5FB878;
-}
-.eleTree-checkbox-checked i {
-    border-color: #5FB878;
-    background-color: #5FB878;
-    color: #fff;
-}
-.eleTree-checkbox-line:after{
-    content: "";
-    position: relative;
-    width: 8px;
-    height: 1px;
-    background-color: #fff;
-    display: inline-block;
-    top: -4px;
-}
-
-.eleTree-checkbox.eleTree-checkbox-disabled i{
-    cursor: not-allowed;
-    background-color: #f2f6fc;
-    border-color: #dcdfe6;
-    color: #c2c2c2;
-}
-.eleTree-checkbox.eleTree-checkbox-disabled i.eleTree-checkbox-line:after{
-    background-color: #c2c2c2;
-}
-.eleTree-checkbox.eleTree-checkbox-disabled i:hover{
-    border-color: #dcdfe6;
-}
-
-#tree-menu{
-    margin: 0;
-    padding: 2px;
-    position: absolute;
-    background: #f5f5f5;
-    border: 1px solid #979797;
-    box-shadow: 2px 2px 2px #999;
-    display: none;
-    z-index: 20181205;
-}
-#tree-menu li>a{
-    display: block;
-    padding: 0 1em;
-    text-decoration: none;
-    width: auto;
-    color: #000;
-    white-space: nowrap;
-    line-height: 2.4em;
-    text-shadow: 1px 1px 0 #fff;
-    border-radius: 1px;
-}
-#tree-menu li>a:hover{
-    background-color: #e8eff7;
-    box-shadow: 0 0 2px #0a6aa1;
-}
-.tree-menu-bg{
-    background-color: #ccc;
-}
-/* #endregion */

docs/plugins/index.js

@@ -1,2 +0,0 @@
-import './eleTree/eleTree.js'
-import './eleTree/eleTree.css'

src/components/plugin/tree.js

@@ -204,11 +204,20 @@ class Tree extends Component{
 			const iconClass = ['xm-option-icon 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)) ? 'visible':'hidden'].join(' ');
 
+			const iconArray = [];
+			if(tree.showFolderIcon){
+				iconArray.push(<i class={ treeIconClass }></i>);
+				if(tree.showLine){
+					if(expand){
+						iconArray.push(<i class='left-line' style={ {left: indent - tree.indent + 3 + 'px'} }></i>)
+					}
+					iconArray.push(<i class='top-line' style={ { left: indent - tree.indent + 3 + 'px', width: tree.indent + (expand === 0 ? 10 : -2) + 'px' } }></i>);
+				}
+			}
+
 			return (
 				<div class={ className } style={ itemStyle } value={ item[value] } onClick={ this.optionClick.bind(this, item, selected, item[disabled], 'line') }>
-					{ tree.showFolderIcon && <i class={ treeIconClass }></i> }
+					{ iconArray }
-					{ tree.showFolderIcon && tree.showLine && <i class={ expand ? 'top-line expand' : 'top-line' } style={ { left: indent - tree.indent + 3 + 'px', width: tree.indent + (expand === 0 ? 10 : -2) + 'px' } }></i> }
-					{ tree.showFolderIcon && tree.showLine && <i class={ expand ? 'left-line expand' : 'left-line' } style={ {left: indent - tree.indent + 3 + 'px'} }></i> }
 					{ item.__node.loading && <span class="loader"></span> }
 					{ showIcon && <i class={ iconClass } style={ iconStyle } onClick={ this.optionClick.bind(this, item, selected, item[disabled], 'checkbox') }></i> }
 					<div class='xm-option-content' dangerouslySetInnerHTML={{ __html: template({ data, item, arr: sels, name: item[name], value: item[value] }) }}></div>

src/style/index.less

@@ -403,7 +403,7 @@ xm-select{
 				margin-left: 1px;
 			}
 		}
-		.scroll-body>.xm-tree>.xm-option>.top-line{
+		.scroll-body>.xm-tree>.xm-option>.top-line, .scroll-body>.xm-option>.top-line{
 			width: 0 !important;
 		}