基于antd封装的二次业务筛选组件-table-filter

文档地址：https://flowerofsummer.github.io/components/

业务筛选组件

支持各种类型的高级搜索组件

基础用法

• 组件响应式布局，默认显示两行，可以通过 maxLineCount 配置最多显示行数
• 每行个数： 如果含有 time-range，则在<1600,显示 3 个，否则显示 4 个；如果不含有 time-range，则在<1600,显示 4 个，否则显示 5 个；每行固定显示几个也可以自己配置 filterCount,默认值即是前面的 [3, 4, 5]
• label：默认 label 110px（约 6 个中文字符，超出…tooltip 显示），固定宽度也可以自己配置 labelWidth

<template><div><table-filter:items="fileds":filter-count="[4,5,6]"/></div>
</template>
<script lang="ts" setup>
const fileds = [{label: 'ip',prop: 'searchIpRef',type: 'textarea',defaultValue: '',customAttrs: {placeholder: '支持多个IP, 一行一个',allowClear: true}}, {label: '标签',prop: 'searchTag',type: 'select',// defaultValue: [],options: [{value: '',label: '所有'},{value: 'RUNNING',label: '运行中'},{value: 'TERMINATED',label: '已关机',},{value: 'CREATE_FAIL',label: '创建失败',},],customAttrs: {placeholder: '请选择'}}, {label: '名称',prop: 'name2',type: 'tree-select',defaultValue: [],options: [{value: 'RUNNING',label: '运行中'},{value: 'TERMINATED',label: '已关机',},{value: 'CREATE_FAIL',label: '创建失败',},],customAttrs: {placeholder: '请选择'}}, {label: '名称',prop: 'name3',type: 'textarea',defaultValue: '',customAttrs: {placeholder: '支持多个IP',allowClear: true}},{label: '时间',prop: 'time',type: 'time-range',defaultValue: []},{label: '名称',prop: 'name5',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name6',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name7',type: 'input',defaultValue: 'test',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name8',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name9',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name10',type: 'input',customAttrs: {placeholder: '请输入'}}, {label: '名称',prop: 'name11',type: 'input',customAttrs: {placeholder: '请输入'}}
]
</script>

YTableFilter

属性

参数	说明	类型	可选值	默认值	是否必填
searchLoading	查询按钮 loading	boolean	-	false	否
isSearchImdate	是否立即搜索	boolean	-	true	否
isShowReset	是否显示重置	boolean	-	true	否
filterCount	自定义 每行显示个数,配置必须 3 位数组	number[]	-	[3,4,5]	否
labelWidth	自定义 label 的宽度	string	-	110px	否
maxLineCount	最多显示行数	bumber	-	2	否

事件

事件名	说明	参数列表	参数说明
onSearch	查询方法	-	-

方法

事件名	说明	参数列表	参数说明
changeFiledData	修改 prop 字段值，清空其他字段值，并搜索	(prop: tring, value: any)	prop: 对应的字段名；value: 对应字段的值

FilterItem

属性（主要针对 select 类型的属性）

参数	说明	类型	可选值	默认值	是否必填
label	筛选名称	string	-	-	是
type	筛选组件类型	string	ComponentType	-	是
prop	绑定字段	string	-	-	是
defaultValue	默认值	[String, Array, Number]	-	-	否
isImdateRequest	是否修改后立即请求	boolean	-	true	否
customAttrs	组件原生属性	Object	-	-	否
options	组件（select/tree-select）绑定 options	Array	-	[]	否
optionsRquest	获取 options 的接口方法	Function	-	-	否
optionsParams	联动的字段(联动请求)	Array	-	[]	否
isFixedDefault	更新 options 后，使用默认值 value	boolean	-	false	否
isInData	options 请求返回数据是否直接在 data 返回	boolean	-	false	否
isShowAll	是否给 options 新增全部选项	boolean	-	true	否
dataFiled	options 数据请求返回在 data 中的字段	string	-	items	否
isDefault0	是否用第一项作为默认值	boolean	-	false	否

componentType

enum ComponentType {input = 'input',select = 'select','tree-select' = 'tree-select','time-range' = 'time-range',textarea = 'textarea'
}