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:文字不间断向左移动的实例代码
Aug 08 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
php获得当前的脚本网址
2007/12/10 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python实现批量图片格式转换
2020/06/16 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
通过实例学习Python Excel操作
2020/01/06 Python
构建高效的python requests长连接池详解
2020/05/02 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
青奥会口号
2014/06/12 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
培训师岗位职责
2015/02/14 职场文书
人事聘任通知
2015/04/21 职场文书
一个都不能少观后感
2015/06/04 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
Docker下安装Oracle19c
2022/04/13 Servers