- { renderItem(item, indent, index) }
- { child && this.state.expand[index] === item[value] &&
-
- }
+ const checked = child && this.state.expand[index] === item[value];
+ checked && boxArr.push(
+
)
+ return renderItem(item, indent, index, checked)
}
- let arr = data.map(item => renderGroup(item, 0, 0)).filter(a => a);
+ let arr = data.map(item => renderGroup(item, 2, 0)).concat(boxArr).filter(a => a);
// let safetyArr = deepMerge([], arr);
// let safetySels = deepMerge([], sels);
@@ -116,7 +142,7 @@ class Cascader extends Component{
}
return (
-
+
{ arr }
)
diff --git a/src/components/plugin/general.js b/src/components/plugin/general.js
index 09182d7..4527cd9 100644
--- a/src/components/plugin/general.js
+++ b/src/components/plugin/general.js
@@ -194,7 +194,7 @@ class General extends Component{
}
//组件将要接收新属性
- componentWillReceiveProps(props){
+ componentWillReceiveProps(props){
if(this.props.show != props.show){
if(!props.show){
//清空输入框的值
diff --git a/src/components/plugin/tree.js b/src/components/plugin/tree.js
index 197f224..9bedad8 100644
--- a/src/components/plugin/tree.js
+++ b/src/components/plugin/tree.js
@@ -237,7 +237,7 @@ class Tree extends Component{
}
const className = ['xm-option', (dis ? ' disabled' : ''), (selected ? ' selected' : ''), (showIcon ? 'show-icon' : 'hide-icon') ].join(' ');
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 treeIconClass = ['xm-tree-icon', expand ? 'expand':'', item[children] && (item[children].length > 0 || (tree.lazy && item.__node.loading !== false)) ? 'xm-visible':'xm-hidden'].join(' ');
const iconArray = [];
if(tree.showFolderIcon){
@@ -284,7 +284,7 @@ class Tree extends Component{
child.length === 0 && (expand = false)
return (
- { tree.showFolderIcon && tree.showLine && expand && child.length > 1 &&
}
+ { tree.showFolderIcon && tree.showLine && expand && child.length > 0 &&
}
{ renderItem(item, indent, child.length === 0 && (!tree.lazy || tree.lazy && item.__node.loading === false) ? 0 : expand) }
{ expand &&
{ child.map(c => renderGroup(c, indent)) }
}
@@ -311,7 +311,7 @@ class Tree extends Component{
//工具条操作
function flat(list, array){
- array.forEach(item => item[optgroup] ? flat(list, item[children]) : list.push(item))
+ array.forEach(item => item[optgroup] ? (!tree.strict && list.push(item), flat(list, item[children])) : list.push(item))
}
const toolbar = (
diff --git a/src/config/options.js b/src/config/options.js
index 832a501..90fd17f 100644
--- a/src/config/options.js
+++ b/src/config/options.js
@@ -107,7 +107,9 @@ export default function (lan = 'zn') {
//是否展示级联
show: false,
//间距
- indent: 200,
+ indent: 100,
+ //是否严格遵守父子模式
+ strict: true,
},
//自定义属性名称
prop: {
diff --git a/src/style/index.less b/src/style/index.less
index 97fca11..e225f00 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -401,7 +401,7 @@ xm-select{
margin-left: -2px;
transform: rotate(90deg);
}
- &.visible{
+ &.xm-visible{
visibility: visible;
}
}
@@ -429,36 +429,57 @@ xm-select{
.xm-cascader{
// position: relative;
-
&-box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
+ padding: 5px 0;
+ border: @border;
+ background-color: #fff;
+ border-radius: 2px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
+ margin: -1px;
+
+ &::before{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 6px solid transparent;
+ border-right-color: @defaultBorderColor;
+ top: 10px;
+ left: -12px;
+ }
+ &::after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 6px solid transparent;
+ border-right-color: #fff;
+ top: 10px;
+ left: -11px;
+ }
+ }
+ &-scroll{
+ height: 100%;
overflow-x: hidden;
overflow-y: auto;
- padding: 5px 0;
-
- }
- &-box[index="0"]{
- background-color: #F5F5F5;
- }
- &-box[index="1"]{
- background-color: #FAFAFA;
- }
- &-box[index="2"]{
- background-color: #FFFFFF;
- }
- &-box[index="3"]{
- background-color: #EFEFEF;
}
}
-
+
&.cascader{
- background-color: #EFEFEF;
+ width: unset;
+ min-width: unset;
+ .xm-option-content{
+ padding-left: 8px;
+ }
+ .disabled .xm-right-arrow{
+ color: #C2C2C2 !important;
+ }
}
-
}
.xm-input{
@@ -533,6 +554,19 @@ xm-select{
cursor: initial;
}
+ .xm-right-arrow{
+ position: absolute;
+ color: #666;
+ right: 5px;
+ top: -1px;
+ font-weight: 700;
+ transform: scale(0.6, 1);
+
+ &::after{
+ content: '>';
+ }
+ }
+
}
//不同尺寸下的数据调整
@@ -573,7 +607,7 @@ xm-select{
.left-line-group{
height: calc(100% - @size);
}
- .xm-tree-icon.hidden+.top-line{
+ .xm-tree-icon.xm-hidden+.top-line{
top: @size / 2 - 1px;
}
}