vxe-table表格中使用vxe-select选择器被遮挡

文章讲述了在弹窗中使用Vxe-Table时,下拉选择器被遮挡的问题。通过添加`transfer`属性并调整`.vxe-select--panel.is--transfer`的z-index样式,解决了这个问题。作者强调style标签不要使用scoped属性以确保样式生效。

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

首先这种情况一般发生在弹窗中嵌入vxe-table表格。

如你所见,我已经激活了下拉选择器,然后我想要选择的内容被遮挡住了。

文档中中的解决办法是加上transfer属性

<vxe-select v-model="row.sex2" multiple :transfer="true">
    <vxe-option v-for="item in sexList" :key="item.value" :value="item.value"
	:label="item.label" />
</vxe-select>

我按照文档设置了,结果是无效的。

以下是我的解决办法

在表格所在的Vue文件下方加上以下样式

<style>
.vxe-select--panel.is--transfer{
	z-index: 2001!important;
}
</style>

注意style标签不应加上scoped属性,否则可能无效。

最后展示解决效果。

### 解决方案 在 `vxe-table` 中实现自定义组件并防止其弹窗或菜单自动关闭,主要涉及事件处理机制的调整。当使用像 `vue-treeselect` 这样的第三方库时,如果默认插槽采用 `div` 可能会遇到点击后下拉框无法正常展示的问题[^2]。 为了确保自定义组件中的弹窗或菜单不会因外部点击而意外关闭,在初始化组件时需特别注意事件监听器的设置方式: #### 方法一:阻止冒泡传播 通过修改事件绑定来控制事件流的行为是一个有效的方法。具体来说是在触发子组件内部操作时调用 `event.stopPropagation()` 来中断事件向上传播到父级元素上,从而避免触发全局范围内的关闭逻辑。 ```javascript // 假设这是你的treeselect组件部分代码 methods: { handleOpen() { this.$refs.selectBox.addEventListener('click', (e) => e.stopPropagation()); } } ``` #### 方法二:配置参数选项 对于某些特定类型的交互控件(如日期选择器),通常提供了一个名为 `appendToBody` 或者类似的属性用于指定浮层是否附加于 body 上而不是当前容器内。这有助于减少由于层级关系引起的遮挡问题,并间接解决了因为失去焦点而导致的隐藏现象。 ```html <template> <!-- 使用 append-to-body 属性 --> <vxe-select :append-to-body="true"></vxe-select> </template> ``` 另外值得注意的是,`vxe-table` 提供了非常丰富的 API 和高度灵活性的支持[^3],因此也可以考虑利用官方推荐的方式来进行更深入定制化开发工作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值