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


Posted in Javascript onOctober 31, 2020

我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局。

我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏。

下面有2种方案来实现这个效果。

1.利用浮动原理

设置下拉框的最大高度为一行的高度,然后超出的部分隐藏。

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

这种方式存在的弊端是如果有2个选项,一个很短一个很长,那么只能看到很短的值,长值被隐藏,会剩余很大的空白。

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

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多选下拉框一行展示的实现方式

补充知识:antd design Menu菜单下拉回调以及下拉列表时只能显示一个列表,其余关闭

我做的是一个显示全国省市区的下拉列表:如下图

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

这个下拉列表是三层嵌套的下拉列表,统计列表不能同时打开,一次只能点开一个。点击下拉时触发函数获得下一层级的下拉数据。

代码如下:

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多选下拉框一行展示的实现方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 #Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 #Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
You might like
留言板翻页的实现详解
2006/10/09 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
react实现同页面三级跳转路由布局
2019/09/26 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python strip()函数 介绍
2013/05/24 Python
python使用mysql数据库示例代码
2017/05/21 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
有关打架的检讨书
2014/01/25 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
销售员岗位职责
2015/02/10 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书