Skip to content
On this page

STableSearch 表格搜索组件

Hidden Title

基础用法:<s-table-search v-model="form" :options="fields" @search="handleSearch" />

属性事件插槽简介

基础用法(column 默认 3showReset 默认 true

通过 options 配置搜索字段,使用 v-model 获取表单值。搜索和重置按钮默认以固定宽度显示在搜索项右侧。点击搜索或按回车时触发 search。基础写法:<s-table-search v-model="form" :options="fields" @search="handleSearch" />

主题(theme 默认 default

只需要在 s-table-search 上设置一次 theme,配置生成的字段组件、render 字段组件以及内置搜索和重置按钮都会自动使用相同主题。字段通过 attrs.theme 设置时可单独覆盖容器主题。基础写法:<s-table-search theme="chenghua" :options="fields" />

自动搜索(searchOn 默认按字段组件决定)

s-select 默认在 change / clear 时搜索,其他组件默认只在 clear 时搜索;字段的 searchOn 优先于组件的全局 searchOn。基础写法:<s-table-search :items="fields" :search-on="['change']" @search="handleSearch" />

自定义字段和操作区

字段配置 useSlot: true 时使用 prop 作为插槽名,传字符串时使用指定插槽名;原有 field-${prop} 插槽继续兼容。字段插槽会提供当前 theme。通过 actions 插槽扩展按钮时也可以接收 theme,用于业务自定义组件。存在 actions 或默认插槽时,操作区会自动显示在搜索项下方,扩展操作靠左,搜索和重置靠右。基础写法:<template #date="{ item, model, value, update, theme }">...</template>

sybz 主题(theme 默认值:default)

设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz,默认值为 default。品牌蓝 #4876EF,AI 辅助绿 #00D3AB

属性

属性名说明类型可选值默认值
modelValue搜索表单值,支持 v-modelobject-undefined
theme内部字段组件和操作按钮的统一主题STableSearchThemedefault / chenghua / shijingshan / sybzdefault
options搜索字段配置STableSearchField[]-[]
items搜索字段配置,优先级高于 optionsSTableSearchField[]-undefined
column每行字段数number正整数3
initialValue初始值及重置后的值object-{}
searchOn全局自动搜索事件,传 false 关闭array / falsechange / clear / falseundefined
showReset是否显示重置按钮booleantrue / falsetrue

options / items 字段属性

字段名说明类型可选值默认值
prop表单字段名string--
label字段标题,用于生成 placeholder 和 titlestring--
comp字段组件string / Component已注册组件或组件对象s-input
attrs透传给字段组件的属性object-{}
render自定义字段渲染组件Component-undefined
useSlot使用字段插槽;true 使用 prop,字符串使用指定名称boolean / stringtrue / false / 插槽名false
searchOn当前字段自动搜索事件,优先于全局配置array / falsechange / clear / falseundefined
on当前字段的 change / clear 回调objectchange / clear{}

事件

事件名说明回调参数
update:modelValue字段值变化或重置时触发(form)
search点击搜索、按回车或命中自动搜索事件时触发(form)
reset点击重置后触发(form)

插槽

插槽名说明参数
propuseSlot 指定名称useSlot 启用的字段插槽{ item, model, value, update, theme }
field-${prop}兼容原有的自定义字段写法{ item, model, value, update, theme }
actions搜索和重置按钮前的操作区{ theme }
defaultactions 的兼容写法{ theme }

思云博智私有前端组件库