srcviewsresourcespublicizecompsPublicizeInDialog.vue
// 部门键值映射 hook
const departmentHook = useDepartmentKeyValMap();
// 表格列筛选列表
const departmentFilters = computed(() =>
departmentHook.departmentKeyValList.value.map((item) => ({
text: item.label as string,
value: item.value as string
}))
);
// 刷新出库单列表数据
const onRefreshClick = async () => {
try {
outOrderLoading.value = true;
// 清除表格筛选
clearFilter();
tableData.value = [];
// 保留刷新前的数据状态
// outOrderList.value = [];
let result = await ckdQueryMasterListForRkService();
outOrderList.value = result.data;
} finally {
outOrderLoading.value = false;
}
};
// 筛选出库单
const filterHandler = (value: string, row: ICkMaster, column: TableColumnCtx) => {
let property = column.columnKey; // 要求表格筛选的列 el-table-column 必须要设置 column-key
if (property in row) {
return row[property as keyof ICkMaster] === value;
}
return false;
};
// 清除表格筛选
const clearFilter = () => {
// 清除表格所有列的筛选
if (outOrderTableRef.value) {
outOrderTableRef.value.clearFilter();
}
};
待入库的物资
{{ scope.row.ckNo }} {{ userHook.lookupMoniker(scope.row.llPersonId) }}
{{ departmentHook.lookupDepartmentName(scope.row.llDeptId) }}
应用效果：存在的问题有：筛选条目过多，筛选面板溢出（没有滚动条效果）
增加样式设置：
1、表格列指定 filter-class-name=”dept-filter-pop”
2、使用全局样式
/* scoped 是给组件内部的元素用的，弹出层跑到了组件外部，就必须用全局样式去处理 */
/* 强制让 dept-filter-pop b筛选面板内容区域在选项过多时出现滚动条 */
.dept-filter-pop .el-table-filter__content .el-scrollbar .el-table-filter__wrap {
max-width: 180px; /* 限制最大高度，内容超过最大宽度时出现滚动条，不设置宽度时默认为 100% */
max-height: 450px !important; /* 限制最大高度，必须使用 !important 才能生效 */
overflow-y: auto !important; /* 强制显示垂直滚动条，必须使用 !important 才能生效 */
}
应用效果：
将 max-height 由 450px 改为 500px，又会溢出
这样设置就能解决
/* scoped 是给组件内部的元素用的，弹出层跑到了组件外部，就必须用全局样式去处理 */
/* 强制让 dept-filter-pop 筛选面板内容区域在选项过多时出现滚动条 */
.dept-filter-pop .el-table-filter__content .el-scrollbar .el-table-filter__wrap {
max-width: 180px; /* 限制最大高度，内容超过最大宽度时出现滚动条，不设置宽度时默认为 100% */
max-height: 500px !important; /* 限制最大高度，必须使用 !important 才能生效 */
overflow-y: auto !important; /* 强制显示垂直滚动条，必须使用 !important 才能生效 */
}
/* 同时限制 .el-table-filter__content 的最大高度 */
.dept-filter-pop .el-table-filter__content {
max-height: 500px !important; /* 限制最大高度，必须使用 !important 才能生效 */
}
动态适配方案
/* scoped 是给组件内部的元素用的，弹出层跑到了组件外部，就必须用全局样式去处理 */
/* 强制让 dept-filter-pop 筛选面板内容区域在选项过多时出现滚动条 */
.dept-filter-pop .el-table-filter__content .el-scrollbar .el-table-filter__wrap {
max-width: 180px; /* 限制最大高度，内容超过最大宽度时出现滚动条，不设置宽度时默认为 100% */
max-height: calc(
60vh - 100px
) !important; /* 限制最大高度（动态适配：用视口高度减去预留空间），必须使用 !important 才能生效 */
min-height: 40px;
overflow-y: auto !important; /* 强制显示垂直滚动条，必须使用 !important 才能生效 */
}
/* 同时限制 .el-table-filter__content 的最大高度 */
.dept-filter-pop .el-table-filter__content {
max-height: calc(
60vh - 100px
) !important; /* 限制最大高度（动态适配：用视口高度减去预留空间），必须使用 !important 才能生效 */
min-height: 40px;
}
应用效果
您自己摸索出的这个解决方案非常精准。为什么必须同时限制 .el-table-filter__wrap 和 .el-table-filter__content 的高度呢？核心原因在于面板的整体高度是由多个部分组成的，而您之前只限制了其中的一部分。
1. 筛选面板的内部结构
Element Plus 的筛选面板在 .el-table-filter__content 内部大概长这样：
...
- .el-table-filter__content 是内容区域的父容器，它包含了搜索框和复选框列表。
- .el-table-filter__wrap 是复选框列表的滚动容器，它只包裹了复选框组。
2. 为什么只限制.el-table-filter__wrap不够？
当您只设置 .el-table-filter__wrap 的 max-height: 500px 时：
- 复选框列表确实被限制在了 500px 以内，并且出现滚动条，这解决了列表溢出的问题。
- 但是，.el-table-filter__content 的整体高度 = 搜索框高度 + .el-table-filter__wrap 的高度。如果搜索框存在（比如您开了 filterable），这个总高度可能达到 30px + 500px = 530px。
- 再加上底部按钮区域（约 40px），整个面板的总高度可能达到 570px。
- 由于面板是通过 挂载到 body 下的，它的位置是相对于视口计算的。当视口高度不足以容纳 570px 时，面板就会整体溢出屏幕底部，即使内部的复选框列表可以滚动，面板本身也没有滚动条，导致用户看不到面板的完整内容。
3. 为什么同时限制.el-table-filter__content就解决了？
当您给父容器 .el-table-filter__content 也加上 max-height: 500px 后：
- 这个父容器的总高度也被限制在了 500px 以内。
- 整个面板的高度 = .el-table-filter__content 高度 + 底部按钮高度 ≈ 500px + 40px = 540px。
- 如果视口能容纳 540px，面板就不会溢出了。
- 由于父容器设置了 max-height，即使内部有搜索框，父容器也不会被无限撑开，从而从源头上控制了面板的整体高度，避免它超出屏幕范围。
4. 更优雅的动态适配方案
虽然同时设置两个容器的固定高度能解决当前问题，但更好的做法是使用视口相对单位，让面板高度自动适应不同大小的屏幕和窗口：
.dept-filter-pop .el-table-filter__content .el-scrollbar .el-table-filter__wrap {
max-width: 180px;
max-height: calc(100vh - 200px) !important; // 用视口高度减去预留空间
overflow-y: auto !important;
}
.dept-filter-pop .el-table-filter__content {
max-height: calc(100vh - 160px) !important; // 给底部按钮留出空间
overflow: hidden; // 防止内容溢出父容器
}
这样一来，无论用户是在 1080p 的大屏幕上，还是在 768p 的笔记本上，面板都会自动调整高度，永远不会超出屏幕。
总结一下您的问题核心： 限制内部滚动区域只能解决“列表太长”的问题，但不能解决“整个面板太高”的问题。只有同时限制父容器的高度，才能确保面板不会超出可视区域。
到此这篇关于Vue3 + Element Plus 表格列筛选的文章就介绍到这了,更多相关Vue3 ElementPlus 表格列筛选内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
