定制化开发antd 下拉框位置出错、下拉框dropdownStyle属性出错(数据超出区域,或者出现双滚动条)

1、定制化开发下拉框位置出错

功能介绍:定制化开发当前使用了antd的控件(定制化开发蓝色边框区域),定制化开发然后里面有一个a-form(红色边框区域)控件,然后在表单里面使用了Select/TreeSelect插件

原始界面如下:

 展开一个下拉框(第二排第一个)界面如下

 这时下拉框的位置从整个tabs的顶端开始往下放

解决方法:给a-form设置滚动属性

<a-form v-else layout="inline" style="border:1px solid red;overflow-y: auto;overflow-x: hidden;">

此时再次展开下拉框,界面如下:

 此时下拉框位置从a-form的顶端开始往下。根据我的理解,因为正常情况下下拉框是从文本框下面开始出现(下图1),但是当下面的区域放不下的时候,就会从上边展开(下图2)

 

 当上下都放不下的时候,就会从父元素的顶端开始展开(此处其实还有一个问题,那就是按道理下拉框的层级应该设置为最高,直接超出tab区域才对,不应该会像现在这样),也就是上面给表单设置滚动之后的样子。

2、下拉框dropdownStyle属性出错的问题,当我使用dropdownStyle给下拉框设置一个最大高度时,出现下面的情况(数据超出了显示区域)(下拉树设置这个属性时正常)

<a-select :dropdownStyle="{ maxHeight: '100px' }" placeholder="匹配规则">

 然后我在属性里面加一个滚动属性,居然出现了双滚动条,如下

 我也不知道为什么会这样,后面我把dropdownStyle替换成dropdownMenuStyle后就正常了。如下图

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发