antd多選下拉框一行展示的實現方式
阿新 • • 發佈:2020-11-01
我們都知道antd的select多選時,如果下拉框寬度不足,則自動浮動到下一行將下拉框撐大,但是這回影響到頁面的整體佈局。
我們期望的效果是,下拉框只顯示一行的值,超出一行的部分自動隱藏。
下面有2種方案來實現這個效果。
1.利用浮動原理
設定下拉框的最大高度為一行的高度,然後超出的部分隱藏。
.ant-select-selection--multiple { max-height: 32px; overflow: hidden; }
這種方式存在的弊端是如果有2個選項,一個很短一個很長,那麼只能看到很短的值,長值被隱藏,會剩餘很大的空白。
2.flex佈局
將下拉框選項放到一行顯示,如果超出了下拉框長度則隱藏。預設的選項是採用float浮動顯示的,所以我們要遮蔽掉浮動效果。
.ant-select-selection--multiple .ant-select-selection__rendered { overflow: hidden; } .ant-select-selection--multiple .ant-select-selection__rendered ul { display: flex; flex-wrap: nowrap; overflow: hidden; float: left; } .ant-select-selection--multiple .ant-select-selection__choice { float: none; overflow: visible; } .ant-select-selection--multiple .ant-select-search--inline { float: none; position: absolute; } .ant-select-selection--multiple { max-height: 32px; overflow: hidden; }
這裡重寫了下拉選項的樣式,達到了目的,但是會存在另一個問題,因為下拉選項排成了不換行的一列,那麼必須指定下拉框的長度為固定值,不能使用百分比,因為一旦選中的下拉值超出了螢幕寬度,那麼他會自動撐大整個螢幕的寬度。
補充知識:antd design Menu選單下拉回調以及下拉列表時只能顯示一個列表,其餘關閉
我做的是一個顯示全國省市區的下拉列表:如下圖
這個下拉列表是三層巢狀的下拉列表,統計列表不能同時開啟,一次只能點開一個。點選下拉時觸發函式獲得下一層級的下拉資料。
程式碼如下:
render(){ let city=this.state.cityList.map(itemss=>( <SubMenu key={itemss.id} title={<span ><Icon type="team" /><span className="nav-text">{itemss.name}</span></span>} onTitleClick={this.getCountryList.bind(this,itemss.id,itemss.name)} > { this.state.countryList.map(citem=>( <Menu.Item key={citem.id}> <span onClick={this.checkedItem.bind(this,citem.id,citem.name)} >{citem.name}</span></Menu.Item> )) } </SubMenu> )); const { startValue,endValue,endOpen } = this.state; return( <div className="div-body"> <div className="div-page"> <div className="div_query "> <Layout> <div className="" /> <Sider collapsed={this.state.collapsed} style={{backgroundColor:'#FFFFFF'}} className="" onCollapse={this.onCollapse} openKeys={this.state.openKeys}--->根據this.state.openKeys的值去對應SubMenu的key值 從而展開此列表。 > <Menu theme="" mode={this.state.mode} defaultSelectedKeys={['6']} openKeys={this.state.openKeys} > <SubMenu key="全國" title={<span><Icon type="user" /><span className="nav-text">全國</span></span>} onTitleClick={this.getProvinceList} > { this.state.provinceList.map((items,i)=> <SubMenu key={items.id} title={<span ><Icon type="team" /><span className="nav-text">{items.name}</span></span>} onTitleClick={this.getCity.bind(this,items.id,items.name,0)}--->onTitleClick---》點選觸發回撥函式 > {city} </SubMenu> ) } </SubMenu> </Menu> </Sider> ) getProvinceList=()=>{ const result=fetch('/web/chargeTrend/getChargePrinceList.htm',{method:'GET',credentials:'include',}).then((res)=>{ return res.json(); }).then((data)=>{ //var ds=eval('('+data+')'); console.log('ds',data); if(data.length>0) { if(this.state.openKeys[0]==="全國") { this.setState({ provinceList: data,openKeys:[],},()=>{ console.log('privince',this.state.provinceList); }) }else{ var arrs=["全國"]; this.setState({ provinceList: data,openKeys:arrs,this.state.provinceList); }) } } }); } getCity=(parentid,name)=>{ var arr=this.state.openKeys; const result=fetch('/web/chargeTrend/getChargeCityList.htm?parentid='+parentid,}).then((res)=>{ return res.json(); }).then((data)=>{ console.log('city',data); if(data.length>0) { if(parentid===this.state.openKeys[1]) { var arrs=["全國"]; this.setState({ cityList:data,adCode:parentid,sRange:name,()=>{ console.log('cityList',this.state.cityList); console.log('city1',this.state.openKeys); }); }else{ var arrs=["全國"]; arrs.push(parentid); this.setState({ cityList:data,this.state.openKeys); }); } } }); } getCountryList=(parentid,name)=>{ var arr=this.state.openKeys; const result=fetch('/web/chargeTrend/getCountyList.htm?parentid='+parentid,}).then((res)=>{ return res.json(); }).then((data)=>{ console.log('country',data); if(data.length>0) { if(this.state.openKeys.length>=3) { if(parentid===this.state.openKeys[2]) { var arrs=["全國"]; arrs.push(arr[1]); this.setState({ countryList:data,()=>{ console.log('Country1',this.state.openKeys) }); }else{ var arrs=["全國"]; arrs.push(arr[1]); arrs.push(parentid); this.setState({ countryList:data,()=>{ console.log('Country2',this.state.openKeys) }); } }else{ arr.push(parentid); this.setState({ countryList:data,openKeys:arr,()=>{ console.log('Country3',this.state.openKeys) }); } } }); } }
以上這篇antd多選下拉框一行展示的實現方式就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。