Skip to content

TableSearch 组件

常规条件查询组件,支持自定义搜索条件。

tips

继承el-form所有属性
同时支持自定义搜索条件

基础用法

只需要传入 searchParamet 配置对象和查询所绑定的 formData 对象即可生成一个搜索表单。

搜索条件的展开和收起

rowsTotal 属性用于控制搜索条件的行数。

当传入 rowsTotal 属性时,搜索条件会默认收起,点击展开按钮可以展开所有搜索条件。所有按钮可通过 time 属性来配置按钮的防抖时间。

自定义列宽

不使用 customCol 时,搜索条件会根据屏幕宽度自动分配列宽默认为 ElCol span 为 6,即每行展示 4 项搜索条件。

关于 ElCol 可以查看 -> Element Plus ElCol

customColtrue 时,列宽将根据 searchParamet 配置内的 colSize 属性来分配列宽。未写入 colSize 时默认为 24。

操作按钮的列宽始终占据 6 列。

自定义插槽的使用

TableSearch 也支持自定义插槽的使用,通过配置文件中的 type 属性和 slotName 属性来配置使用插槽。

插槽的使用包含两种模式:

  1. 如果配置中 Object 的 keyslotName 相同,如示例中的 paramsSlot 则不会默认生成对应的 ElFormItem 组件。

  2. 如果配置中 Object 的 keyslotName 不同,如示例中的 paramsSlotForItemSlot 则会默认生成对应的 ElFormItem 组件。此时可以配置对应的 ElFormItem 属性如:label...

Attributes

同时继承所有 El2Form 的属性。
详情可查看 -> El2Form

参数说明类型默认值(ms)
searchParamet同 El2Form 配置 查看 -> El2FormOption-
time防抖时间number0
rowsTotal默认展示搜索条件行数number-
customCol是否自定义列宽booleanfalse

Events

事件 通过 TableSearch 的 ref 对象来调用

事件名说明回调参数
search点击搜索按钮触发formData
reset点击重置按钮(重置表单后)触发回调-
resetSearchForm重置TableSearch表单formData