描述

表格表头过滤要结合 tiCellText 组件和 tiHeadFilter 组件来实现。ti-cell-text包裹的是表头单元格 文本,ti-head-filter为表头过滤的漏斗图标,tiHeadFilter的接口说明请查询 TiHeadFilterComponent。

表头过滤-时间日期通过配置 isDatetimedatetimeConfig 等接口来配置表头过滤下拉面板。

isDatetime 接口控制表头过滤是否设置为时间日期面板。

datetimeConfig 接口设置表头过滤时间日期面板中的配置信息:

datetimeConfig.format 可选,设置日期时间显示格式。

datetimeConfig.min 可选,设置最小值。

datetimeConfig.max 可选,设置最大值。

datetimeConfig.onlyDate 可选,设置是否仅是日期的选择(没有时间的选择),不设置时默认是日期时间的选择。

panelAlign 接口控制表头过滤下拉面板展开方向,默认左对齐

panelWidth 接口控制表头过滤下拉框的宽度,默认为'auto',搜索场景下默认值修改为“180px”

备注:

searchable,labelKey 两个接口,因时间日期和下拉是两个相互独立的面板,且面板中不包含搜索框和下拉options的匹配,此处不涉及这两个接口的使用。 所以在这两个接口在时间日期面板中使用无效

因时间日期面板涉及的场景较多,需求不一,表格只提供接口及过滤时机,具体搜索实现方案,用户根据实际场景进行自定义,此处提供简单示例供参考

示例



{{column.title}} {{column.title}}
{{row.firstName}} {{row.birthday}} {{row.hireDate}} {{row.start}} {{row.expired}}