antd 드 롭 다운 상자 한 줄 을 선택 하여 보 여 주 는 실현 방식

antd 의 select 다 중 선택 을 알 고 있 습 니 다.드 롭 다운 상자 의 너비 가 부족 하면 다음 줄 로 자동 으로 이동 하여 드 롭 다운 상 자 를 크게 벌 리 지만 이번 에는 페이지 의 전체 레이아웃 에 영향 을 줍 니 다.
우리 가 원 하 는 효 과 는 드 롭 다운 상자 가 한 줄 의 값 만 표시 하고 한 줄 을 넘 는 부분 은 자동 으로 숨 기 는 것 입 니 다.
이 효 과 를 실현 하기 위 한 두 가지 방안 이 있다.
1.부동 의 원 리 를 이용한다
드 롭 다운 상자 의 최대 높이 를 한 줄 높이 로 설정 하고 초과 한 부분 을 숨 깁 니 다.

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

이런 방식 에 존재 하 는 단점 은 두 가지 옵션 이 있 는데 하 나 는 짧 고 하 나 는 길 면 짧 은 값 만 볼 수 있 고 긴 값 은 숨겨 져 있어 큰 공백 이 남는다 는 것 이다.

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 메뉴 드 롭 다운 및 드 롭 다운 목록 은 하나의 목록 만 표시 하고 나머지 는 닫 습 니 다.
내 가 만 든 것 은 전국 성 시 내 를 나타 내 는 드 롭 다운 목록 이다.다음 과 같다.

이 드 롭 다운 목록 은 3 층 에 포 함 된 드 롭 다운 목록 입 니 다.통계 목록 은 동시에 열 수 없고 한 번 에 하나만 누 를 수 있 습 니 다.드 롭 다운 을 클릭 할 때 함 수 를 터치 하여 다음 단계 의 드 롭 다운 데 이 터 를 얻 습 니 다.
코드 는 다음 과 같 습 니 다:

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,
          },()=>{
            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=["  "];
          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?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)
          });
        }


      }
    });
  }
} 

이상 의 이 antd 는 드 롭 다운 상자 한 줄 을 선택 하여 보 여 주 는 실현 방식 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.