diff --git a/src/components/filterSelect/main.css b/src/components/filterSelect/main.css index d5765cf9..e3ca2175 100644 --- a/src/components/filterSelect/main.css +++ b/src/components/filterSelect/main.css @@ -53,6 +53,15 @@ padding-right: 6px; } .filter-placeholder{ + max-width: 100px; + overflow: hidden; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + /* 可以显示的行数,超出部分用...表示*/ + -webkit-box-orient: vertical; + /*控制显示行数*/ + -webkit-line-clamp: 1; font-size: 12px; color: #626366; padding-left: 5px; diff --git a/src/components/filterSelect/main.js b/src/components/filterSelect/main.js index 453e7458..dc68960f 100644 --- a/src/components/filterSelect/main.js +++ b/src/components/filterSelect/main.js @@ -16,10 +16,12 @@ export default class filterSelect extends React.Component { id: props.data.id, label: props.data.label, selectedMenu: props.data.menuList[0], + multiple:props.multiple|false, menuList: menuList, visible: true, menuShow: true, propName: props.data.prop, + selectList:[] }; this.state.text = props.data.menuList[0].name; } @@ -28,15 +30,40 @@ export default class filterSelect extends React.Component { this.setState({ menuShow: isShow }); } - onMenuClick(e, id) { - let seleted = _.find(this.state.menuList, function (o) { - return o.id == id; - }); - this.setState({ selectedMenu: seleted }); - this.setState({ text: seleted.name }); + mouseLeaveFn(){ this.setState({ menuShow: false }); + } + mouseMenuFn(){ + this.setState({ menuShow: true }); + } + onMenuClick(e, id) { + if(this.state.multiple){//多选 + let selectAll=_.cloneDeep(this.state.selectList); + if(!selectAll.includes(id)){ + selectAll.push(id); + }else{ + selectAll=selectAll.filter(item=>item!=id); + } + this.setState({selectList:selectAll}); + let seleted = _.filter(this.state.menuList, function (o) { + return selectAll.includes(o.id) + }); + let seletedIds=seleted.map(it=>it.id); + let seletedNames=seleted.map(it=>it.name); + this.props.selectFn(seletedIds, this.state.propName); + this.setState({ text: seletedNames.join(',') }); + }else{//单选 + let seleted = _.find(this.state.menuList, function (o) { + return o.id==id + }); + this.setState({ selectedMenu: seleted }); + this.setState({ text: seleted.name }); + this.props.selectFn(id, this.state.propName); + this.setState({ menuShow: false }); + } + // this.setState({ text: seleted.name }); //点击选择菜单 - this.props.selectFn(id, this.state.propName); + } onMenuHide() { this.setState({ menuShow: false }); @@ -60,6 +87,8 @@ export default class filterSelect extends React.Component { onClick={() => { this.onHandlerClick(); }} + onMouseEnter={()=>this.mouseMenuFn()} + // onMouseLeave={()=>this.mouseLeaveFn()} > {this.state.label} : @@ -76,6 +105,7 @@ export default class filterSelect extends React.Component { {this.state.menuShow ? ( +