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

　　介绍

本篇文章为大家展示了antd实现多选下拉框一行展示,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

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

<强> 1。利用浮动原理

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

 .ant-select-selection——多个{
　　max-height: 32像素;
　　溢出:隐藏;
　　}

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

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

<强> 2。flex布局

将下拉框选项放到一行显示,如果超出了下拉框长度则隐藏。默认的选项是采用浮浮动显示的,所以我们要屏蔽掉浮动效果。

 .ant-select-selection——多个.ant-select-selection__rendered {
　　溢出:隐藏;
　　}
　　.ant-select-selection——多个.ant-select-selection__rendered ul {
　　显示:flex;
　　flex-wrap: nowrap;}
　　溢出:隐藏;
　　浮:左;
　　}
　　.ant-select-selection——多个.ant-select-selection__choice {
　　浮:没有;
　　溢出:可见;
　　}
　　.ant-select-selection——多个.ant-select-search内联{
　　浮:没有;
　　位置:绝对的;
　　}
　　.ant-select-selection——多个{
　　max-height: 32像素;
　　溢出:隐藏;
　　}

这里重写了下拉选项的样式,达到了目的,但是会存在另一个问题,因为下拉选项排成了不换行的一列,那么必须指定下拉框的长度为固定值,不能使用百分比,因为一旦选中的下拉值超出了屏幕宽度,那么他会自动撑大整个屏幕的宽度。

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

<强> antd设计菜单菜单下拉回调以及下拉列表时只能显示一个列的表,其余关闭

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

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

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

代码如下:

渲染(){ 　　让城市=this.state.cityList.map(项目=祝辞( 　　& lt;子菜单 　　关键={itemss.id} 　　title={& lt;跨度比;& lt;图标类型=皌eam"/祝辞& lt;跨越className=皀av-text"在{itemss.name} & lt;/span> & lt;/span>}>上述内容就是antd实现多选下拉框一行展示,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。

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