antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。
我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。
下面有2种方案来实现这个效果。
1.利用浮动原理
设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。
.ant-select-selection--multiple {
max-height: 32px;
overflow: hidden;
}
这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。
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菜单下拉回调以及下拉列表时只能显示一个列表，其余关闭
我做的是一个显示全国省市区的下拉列表：如下图
这个下拉列表是三层嵌套的下拉列表，统计列表不能同时打开，一次只能点开一个。点击下拉时触发函数获得下一层级的下拉数据。
代码如下：
render(){
let city=this.state.cityList.map(itemss=>(
key={itemss.id}
title={{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(
collapsed={this.state.collapsed}
style={{backgroundColor:'#FFFFFF'}}
className=""
onCollapse={this.onCollapse}
openKeys={this.state.openKeys}--->根据this.state.openKeys的值去对应SubMenu的key值 从而展开此列表。
>
defaultSelectedKeys={['6']}
openKeys={this.state.openKeys}
>
key="全国"
title={全国}
onTitleClick={this.getProvinceList}
>
{
this.state.provinceList.map((items,i)=>
key={items.id}
title={{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?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多选下拉框一行展示的实现方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
时间： 2020-10-29
antd select多选_antd多选下拉框一行展示的实现方式相关推荐
- 下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...
现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...
- el-select下拉框内展示el-tree结构
el-select下拉框内展示el-tree结构 封装组件 <template><div><!-- :size="size" --><el ...
- php可输入的下拉框,JavaScript_可编辑下拉框的2种实现方式，可编辑下拉框-HTML 复制代码 代 - phpStudy...
可编辑下拉框的2种实现方式 可编辑下拉框-HTML A类 B类 C类 D类 可编辑下拉框-JS 可编辑下拉框 可编辑下拉框 作者 function combox(obj,select){ this.o ...
- HTML单选、多选、按钮、下拉框、文本输入框
<!DOCTYPE html> <html><body><form action=""><input type="r ...
- ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值
场景 要实现的效果如下 官方示例代码实现多选 为el-select设置multiple属性即可启用多选,此时v-model的值为当前选中值所组成的数组. 默认情况下选中值会以 Tag 的形式展现,你也 ...
- treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 ...
- 单元格只能下拉框选_数据有效性定义下拉框只能选择一个如何实现选择多个选项...
相信表亲们很多人用过数据有效性,通过数据有效性定义序列,在下拉框中选择想要的选项,然而,数据有效性定义通过下拉框只能选择一个选项,如果要选择多个选项,怎么办呢?我们看看下面的动画: 看这个动画是不是感 ...
- struts html:select 默认选中,Struts2自动选择下拉框的值
在Struts2中,HTML下拉框可以通过标签呈现.要自动选择一个下拉框的默认值,只是声明值"属性标记,并设置相应的默认值. 这里创建一个Web工程:strut2autoselectdrop ...
- select下拉框分组展示插件的使用--(select-mania插件的使用)
一.概述 在web项目中很多地方用到下拉框,原生的下拉框比较丑陋,之前的文章中介绍过一款用来美化下拉框的插件可以参考: 手把手教你--jquery chosen插件的使用和API(html下拉框美化) ...
最新文章
- 四边形可以分为几类_四边形有几种类型
- 变长结构体的临时笔记
- 边缘计算的爆发为安防全产业带来了怎样的变化？
- poj 1679 TheUniqueMST 最小生成树Kruskal（、Prim待做
- 【自然框架】元数据的数据库结构的详细说明和示例（三）：项目与数据库字段的关联...
- DOM_xss预备知识
- 阿里研究院副院长杨健：新零售领动数字经济
- pyspark env: ‘python’: No such file or directory
- matlab调用函数画图,matlab画图之pcolor函数
- iOS程序员自述，从月入10k到年薪百万，移动架构师如何养成的？
- 【CSS】学习iview的icon样式+font字体
- uvaoj 10066 - The Twin Towers 最长公共子序列(LCS)
- ios开发学习- 简易音乐播放器2 （基于iPhone4s屏幕尺寸）-- 歌词解析--plist文件应用--imageNamed图片加载耗内存...
- 如何安全快速的迁移你的系统到固态硬盘
- 设计模式——七大原则（附代码示例）
- 2022 CSP 游记
- 【java】删除文件夹及文件夹中的所有文件
- 图片融合 c++ cuda加速
- 激活window10专业版的方法。
- 使用charles修改服务器返回数据,Charles使用part4——修改网络请求