ant design vue中a-tree-select的使用注意

最新推荐文章于 2025-06-20 10:50:30 发布
最新推荐文章于 2025-06-20 10:50:30 发布
阅读量4k 收藏 6
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m_uncle/article/details/117702160
本文探讨了在下拉菜单内容过多时如何使用`dropdown-style`属性限制高度并启用滚动条。然而，这样做会导致下拉框在滚动时位置不固定。通过添加`getPopupContainer`属性，将下拉框的弹出位置设置为触发元素的父节点或body，成功解决了下拉框滚动时的定位问题。这种方法确保了用户体验的流畅性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当下拉的内容较多的时候,没有使用:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"的效果,会占满屏幕

使用:dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"之后的效果:就会按照设置的高度来

 

出现以下的问题: 滚动条滚动的时候,下拉框不固定

解决方案: 添加下面的代码

:getPopupContainer="
                                        triggerNode => {
                                          return triggerNode.parentNode || document.body;
                                        }"

整体如图:

vue+ant design vue - 实现Tree树形控件带搜索库并可关键字搜索筛选功能，Antd组件库a-tree可搜索的树展示搜索结果并展开（根据关键字搜索过滤tree树列表数据，详细示例代码
高级前端工程师
05-06 4286
Vue AntDesign可搜索的树（只展示搜索结果并展开）vue+antd使用andt-tree实现可搜索的tree_antd选择树搜索，vue项目Antd 实现Tree树形控件带搜索功能，支持搜索展开tree，antd-tree组件带搜索框，Ant Design Vue组件Tree树形控件，Tree组件实现可搜索的树，ant.design组件库中的Tree组件实现可搜索的树，树控件的搜索功能，antd Tree 组件 带搜索，动态list数据，tree嵌套数据，搜索后关键字标红，具备搜索功能的树形组件，
ant-design-vue中实现a-tree树形控件父子关联选中过滤的算法
晓风残月淡的博客
09-07 1578
在使用ant-design-vue的框架时，a-tree是比较常用的组件，比较适合处理树形结构的数据。 但是在与后台数据进行授权交互时，就不友好了。在原生官方文档的例子中，若子项被勾选，则父级节点会被关联勾选，但这勾选并不一定是选中的意思。有可能是半选中，通过方框样式选中，也就是说父级节点的值不会出现在`checkedKeys`的数组中。 所以需要将服务传过来的数据`allCheckedKeys`处理，再还原成选中`checkedKeys`和半选中`halfCheckedKeys`的两部分。
Ant Design Vue详解a-tree-select使用树形选择器，递归渲染数据，点击选项回显，一二级菜单是否可选等问题
博客之家
01-24 4821
【代码】Ant Design Vue详解a-tree-select使用树形选择器，递归渲染数据，点击选项回显，一二级菜单是否可选等问题。
Ant Design vue中select下拉框组件偏移问题
first_shun的博客
09-12 5233
当使用antdesign vue中的select出现下拉框位置偏移的时候
控制 Ant Design TreeSelect 的搜索与展开功能
最新发布
chanyeol14805的博客
06-20 962
本文探讨了优化Ant Design树选择组件(a-tree-select)搜索和选中节点展开行为的解决方案。
[Ant Design Vue 树控件Tree]内存溢出报错
m0_53584457的博客
06-27 511
具体报错信息：Maximum call stack size exceeded。使用ant design vue控件时发现报错，但是数据展示时没有问题的；查看官方文档，使用虚拟滚动(height 参数)可以解决该问题；经排查，是我的目录下数据过多，差不多有小一万的数据；
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
是秃子总会发光
03-13 8334
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
ANT DESIGN VUE 中树形控件勾选框改造，多选变单选
flhhly的博客
02-10 6002
一、遇到问题： 有个需求，是要把属性控件的勾选框改变，从正方形的多选变成圆形单选。话不多说，上图 1、官方文档案例： 这是很明显的多选，正方形勾选框。详细地址：Ant Design Vue 2、需求文档案例： 我这里采取的是改变树形组件勾选框的样式，并且通过api提供的信息设置成单选，结果如上图。父子之间不关联。 3、实现 下面是调研时候的html代码，我这里使用的是可以拖拽的树形控件，加上单选功能 html部分 <a-tree clas
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
在Ant Design Vue中，`a-select`组件是一个用于选择项的下拉框，它提供了丰富的交互和样式。在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，...
基于ant-design-vue中a-tree的搜索功能
热门推荐
py_boy的博客
12-10 1万+
项目开发是用的vue+ant-design-vue 最近收到一个新的搜索需求，需要对目录树进行搜索，并将搜索到的值进行高亮与展开显示。 废话不多说直接上代码，以下代码只是一个简单的demo。 <template> <div> <a-input-search v-model="searchStr" placeholder="输入搜选项" style="wid...
Ant Design Vue 之a-tree-select
qq_40263927的博客
01-30 5141
Ant Design Vue 是比较流行的vue框架之一，主要是展示a-tree-select 的简单用法，a-tree-select组件主要用于展示树结构的选择。
a-tree-select 树形下拉选择器 异步请求数据
qq_43541443的博客
03-21 1619
这样写的原因,因为后端不提供下级节点的数据 所以才这样写 获取第一个接口返回的数据,根据数组id请求下级节点。保留了loading加载。
antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升
yehaocheng520的博客
11-25 6372
antd——a-tree-select 树形选择控件 与 a-cascader 级联选择器 的对比——技能提升
a-tree-select 显示数据、获取value和label、限制高度
weixin_43479662的博客
02-16 4898
vue+a-tree-select 多级下拉树的基础使用
Antd中使用Select遇到的问题
lao_guolao_guo的博客
06-04 1739
Antd的select 组件设置了getPopupContainer后的问题 使用antd的select时，默认菜单渲染到父节点上，这就会导致这个样子 官网上给了一个getPopupContainer属性，用于设置菜单渲染节点 getPopupContainer={triggerNode => { return triggerNode.parentNode || document.body; }} 本来以为问题就这么愉快的解决了，然后发现~ 排查后发现是table的columns配置中这一列
a-tree-select组件父节点强关联子节点，子节点非强关联父节点
m0_67084957的博客
03-02 960
【代码】a-tree-select组件父节点强关联子节点，子节点非强关联父节点。
使用ant design vue的树选择（TreeSelect）
qq_53821346的博客
04-10 1836
ant design vue的表格可勾选及树选择使用记录
【vue3 + antd】Tree 树形控件
m0_65041204的博客
01-18 2392
antd-tree默认展开所有层级，点击文字时也能选中对应节点
ant-design树选择框生成treeData数据结构
WebView
11-24 2813
1、使用TreeSelect组件时，我们需要根据接口返回的数据生成官方样例的数组结构 2、这里主要是分享代码，代码有根据具体情况命名进行修改，仅供参考 const classGradesData = []; // eslint-disable-next-line no-unused-expressions classTypeSet && classTypeSet.forEach((item, idex) => { // 生成children
ant design vue 中 a-tree-select 添加唯一key
05-12
在 Ant Design Vue 的 ATreeSelect 组件中添加唯一 key 的方法如下： 1. 首先需要在数据源中添加一个唯一标识符，比如 id。 2. 在 ATreeSelect 组件中，设置 key 的值为数据源中的唯一标识符，如下所示： ``` <a-tree-select :tree-data="treeData" :key="'tree-select-' + item.id"></a-tree-select> ``` 其中，`item.id` 为数据源中的唯一标识符，可以根据实际情况进行修改。 这样设置之后，每个 ATreeSelect 组件都会有一个唯一的 key 值，避免出现重复 key 的问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值