antd多選下拉框一行展示的實(shí)現(xiàn)方式

更新時(shí)間：2020年10月31日 09:27:39 作者：風(fēng)火一回

這篇文章主要介紹了antd多選下拉框一行展示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

我們都知道antd的select多選時(shí)，如果下拉框?qū)挾炔蛔?，則自動(dòng)浮動(dòng)到下一行將下拉框撐大，但是這回影響到頁(yè)面的整體布局。

我們期望的效果是，下拉框只顯示一行的值，超出一行的部分自動(dòng)隱藏。

下面有2種方案來實(shí)現(xiàn)這個(gè)效果。

1.利用浮動(dòng)原理

設(shè)置下拉框的最大高度為一行的高度，然后超出的部分隱藏。

 .ant-select-selection--multiple {
      max-height: 32px;
      overflow: hidden;
 }

這種方式存在的弊端是如果有2個(gè)選項(xiàng)，一個(gè)很短一個(gè)很長(zhǎng)，那么只能看到很短的值，長(zhǎng)值被隱藏，會(huì)剩余很大的空白。

2.flex布局

將下拉框選項(xiàng)放到一行顯示，如果超出了下拉框長(zhǎng)度則隱藏。默認(rèn)的選項(xiàng)是采用float浮動(dòng)顯示的，所以我們要屏蔽掉浮動(dòng)效果。

 .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;
    }

這里重寫了下拉選項(xiàng)的樣式，達(dá)到了目的，但是會(huì)存在另一個(gè)問題，因?yàn)橄吕x項(xiàng)排成了不換行的一列，那么必須指定下拉框的長(zhǎng)度為固定值，不能使用百分比，因?yàn)橐坏┻x中的下拉值超出了屏幕寬度，那么他會(huì)自動(dòng)撐大整個(gè)屏幕的寬度。

補(bǔ)充知識(shí)：antd design Menu菜單下拉回調(diào)以及下拉列表時(shí)只能顯示一個(gè)列表，其余關(guān)閉

我做的是一個(gè)顯示全國(guó)省市區(qū)的下拉列表：如下圖

這個(gè)下拉列表是三層嵌套的下拉列表，統(tǒng)計(jì)列表不能同時(shí)打開，一次只能點(diǎn)開一個(gè)。點(diǎn)擊下拉時(shí)觸發(fā)函數(shù)獲得下一層級(jí)的下拉數(shù)據(jù)。

代碼如下：

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}--->根據(jù)this.state.openKeys的值去對(duì)應(yīng)SubMenu的key值 從而展開此列表。
              >
                 <Menu theme="" mode={this.state.mode}
                    defaultSelectedKeys={['6']}
                    openKeys={this.state.openKeys}
                 >
                  <SubMenu
                    key="全國(guó)"
                    title={<span><Icon type="user" /><span className="nav-text">全國(guó)</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---》點(diǎn)擊觸發(fā)回調(diào)函數(shù)
                         >
                           {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]==="全國(guó)")
        {
          this.setState({
            provinceList: data,
            openKeys:[],
          },()=>{
            console.log('privince',this.state.provinceList);
          })
        }else{
          var arrs=["全國(guó)"];
          this.setState({
            provinceList: data,
            openKeys:arrs,
          },()=>{
            console.log('privince',this.state.provinceList);
          })
        }


      }
    });
  }
  getCity=(parentid,name)=>{
    var arr=this.state.openKeys;

    const result=fetch('/web/chargeTrend/getChargeCityList.htm?parentid='+parentid,
      {method:'GET',
        credentials:'include',
      }).then((res)=>{
      return res.json();
    }).then((data)=>{
      console.log('city',data);
      if(data.length>0)
      {
        if(parentid===this.state.openKeys[1])
        {
          var arrs=["全國(guó)"];
          this.setState({
            cityList:data,
            adCode:parentid,
            sRange:name,
            openKeys:arrs,
          },()=>{
            console.log('cityList',this.state.cityList);
            console.log('city1',this.state.openKeys);
          });
        }else{
          var arrs=["全國(guó)"];
          arrs.push(parentid);
          this.setState({
            cityList:data,
            adCode:parentid,
            sRange:name,
            openKeys:arrs,
          },()=>{
            console.log('cityList',this.state.cityList);
            console.log('city1',this.state.openKeys);
          });
        }

      }
    });
  }
  getCountryList=(parentid,name)=>{
    var arr=this.state.openKeys;
    const result=fetch('/web/chargeTrend/getCountyList.htm?parentid='+parentid,
      {method:'GET',
        credentials:'include',
      }).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=["全國(guó)"];
            arrs.push(arr[1]);
            this.setState({
              countryList:data,
              adCode:parentid,
              sRange:name,
              openKeys:arrs,
            },()=>{
              console.log('Country1',this.state.openKeys)
            });
          }else{
            var arrs=["全國(guó)"];
            arrs.push(arr[1]);
            arrs.push(parentid);
            this.setState({
              countryList:data,
              adCode:parentid,
              sRange:name,
              openKeys:arrs,
            },()=>{
              console.log('Country2',this.state.openKeys)
            });
          }
        }else{
          arr.push(parentid);
          this.setState({
            countryList:data,
            adCode:parentid,
            sRange:name,
            openKeys:arr,
          },()=>{
            console.log('Country3',this.state.openKeys)
          });
        }


      }
    });
  }
}

以上這篇antd多選下拉框一行展示的實(shí)現(xiàn)方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: