100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant Design vue中select下拉框组件偏移问题

Ant Design vue中select下拉框组件偏移问题

时间:2023-07-19 19:52:27

相关推荐

Ant Design vue中select下拉框组件偏移问题

当使用antdesign vue中的select出现下拉框位置偏移的时候,解决方案如下:

1、解决单个或少量下拉框偏移的问题

可以使用该组件的“getPopupContainer”属性,它的作用是相对于菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位,如果遇到下拉框过多的情况下

<a-selectref="select"v-model:value="value1"style="width: 120px"@focus="focus"@change="handleChange":getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}"><a-select-option value="jack">Jack</a-select-option><a-select-option value="lucy">Lucy</a-select-option><a-select-option value="disabled" disabled>Disabled</a-select-option><a-select-option value="Yiminghe">yiminghe</a-select-option></a-select>

2、解决过多下拉框问题偏移的情况

也是使用该属性,不过是将该属性配置到全局化配置中

<template><a-config-provider :getPopupContainer="getPopupContainer"><app /></a-config-provider></template><script>export default {methods: {getPopupContainer(el, dialogContext) {if (dialogContext) {return dialogContext.getDialogWrap();} else {return document.body;}},},};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。