KFilterSort

筛选排序

通用筛选排序组件,搜索也是筛选条件,支持组合搜索、排序和可折叠的筛选条件。以下示例使用本地数据,操作不会修改实际资源。

工具栏模式

输入搜索后自动应用(停止输入约 300 毫秒),回车或搜索按钮可立即搜索;选择排序立即生效。筛选条件编辑后点击“应用”生效,“清除”只清空筛选条件,保留搜索与排序。

当前结果:3 条

名称
类型
权重
示例 A
影视
10
示例 B
游戏
30
示例 C
影视
20

表单模式

点击“搜索”或在输入框中回车应用条件;切换排序立即应用当前输入。“更多筛选”展开最低权重,当前应用摘要中的“清除”重置搜索、排序与全部筛选。

排序
类型

当前结果:3 条

名称
类型
权重
示例 A
影视
10
示例 B
游戏
30
示例 C
影视
20

接入说明

通过 v-model:search 和 v-model:sort 接收搜索与排序值;filters 定义筛选项,filterValues 传入当前条件,update-filter 返回字段 key 和字符串值,空字符串表示不限。收到 apply 后加载列表并重置页码;表单模式还需处理 reset 事件。

筛选支持 select、text、search、date、datetime-local 和 number;可设置 placeholder、span、min、max、minlength、maxlength、pattern。select 使用 options 定义选项,组件自动提供置顶的“全部”,并用分割线与具体选项分开;排序默认项同样置顶并分隔。表单模式用 advanced 将条件放进“更多筛选”;工具栏模式将全部条件放进筛选面板。

disabled 用于列表加载期间禁用操作,searchDisabled 可单独禁用搜索。组件负责输入与事件,列表请求、网址参数和分页由接入页面管理。