表格单元格菜单 下拉列表组件使用鼠标选择选项时搜索框消失
swansrp opened this issue · comments
版本4.2.2
官方示例
https://www.surely.cool/doc/basic#header-menu
其中input组件换成下拉选择组件
<a-input
ref="searchInput"
:value="selectedKeysRef.value[0]"
:placeholder="Search ${column.dataIndex}"
style="width: 188px; margin-bottom: 8px; display: block"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="handleSearch(selectedKeysRef.value, confirm, column.dataIndex)"
/>
后添加或者替换成
<a-select
:value="selectedKeysRef.value[0]"
:placeholder="Search ${column.dataIndex}"
:options="[{value: '1', label: '是'},{value: '0', label: '否'}]"
style="width: 188px; margin-bottom: 8px; display: block"
@change="e => setSelectedKeys(e ? [e] : [])"
@pressEnter="handleSearch(selectedKeysRef.value, confirm, column.dataIndex)"
/>
使用下拉列表进行筛选如下图
当点击下拉列表的内容时,搜索框会消失(我猜原因是因为失焦)
当使用键盘上下按钮选择下拉列表内容时工作正常
请给与解决方案指点 谢谢
select 下拉框默认挂到了 body，提供 getPopupContainer 更改到弹窗中
MenuPopupArg
export type MenuFilterProps = {
prefixCls: string;
setSelectedKeys: (selectedKeys: Key[]) => void;
selectedKeysRef: Ref<Key[]>;
confirm: () => void;
clearFilters: () => void;
filters: ColumnFilterItem[];
};
export interface MenuPopupArg {
column: ColumnT;
event: MouseEvent;
hidePopup: () => void;
filter: MenuFilterProps;
}
现在#menuPopup应该是没有放出getPopupContainer
是要等待您的新版本更新对吧
是 select 添加
我的意思是 像
<template #cellEditor="{ column, modelValue, save, closeEditor, editorRef, getPopupContainer }">
cellEditor放出了getPopupContainer参数 可以在template中使用
#menuPopup 中没有这个参数
如何使用 请指点 谢谢
此外当我在右键菜单中使用a-popconfirm二次确认操作的时候
也会出现confirm的按钮不响应的现象 应该也是挂载问题
请给与指点 谢谢
您好 这个case的解决方案是等待您更新版本
#menuPopup
#contextmenuPopup
2个插槽提供getPopupContainer参数
是吗
还是我应该寻求别的解决方案
谢谢您的确认回复
提供一个解决思路
将下拉列表中使用的组件添加
:get-popup-container="(triggerNode) => triggerNode.parentNode"
然后通过修改样式完成功能
先将弹出框整体变大,确保父组件足够大
例如
:deep(.surely-table-popup-container-inner) {
width: 580px;
height: 400px;
}
然后保证父组件背景色透明,使父组件显示的不明显
:deep(.surely-table-popup-container) {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
最后将引入设置引入组件的大小 并设置背景色
.filter-column {
background-color: white;
height: 80px;
width: fit-content;
padding: 8px 16px 8px 16px
}
下拉选项框,时间,日期选择框均经过测试