antd多选下拉框一行展示的实现方式

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

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

render（）{
let city=this.state.cityList.map(itemss=>(
       {itemss.name}}
         OnTitleClick={this.getCountryList.bind(this,itemss.id,itemss.name)}
       >
         {
           this.state.countryList.map(citem=>(
             {citem.name}
           ))
         }
       

     ));
    const { startValue, endValue, endOpen } = this.state;
    return(
      

        

          

            
                

              根据this.state.openKeys的值去对应SubMenu的key值 从而展开此列表。
              >
                 
                  全国}
                    OnTitleClick={this.getProvinceList}
                  >
                    {
                      this.state.provinceList.map((items,i)=>

                         {items.name}}
                          OnTitleClick={this.getCity.bind(this,items.id,items.name,0)}--->onTitleClick---》点击触发回调函数
                         >
                           {city}
                        
                      )
                    }
                  
                
              
              ）

   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,
          },()=>{
            console.log('privince',this.state.provinceList);
          })
        }


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

    const result=fetch('/web/chargeTrend/getChargeCityList.htm&＃63;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=["全国"];
          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=["全国"];
          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&＃63;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=["全国"];
            arrs.push(arr[1]);
            this.setState({
              countryList:data,
              adCode:parentid,
              sRange:name,
              openKeys:arrs,
            },()=>{
              console.log('Country1',this.state.openKeys)
            });
          }else{
            var arrs=["全国"];
            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)
          });
        }


      }
    });
  }
}