TuiPlus基础组件文档

Appearance

On this page

查询条件组件 ​

基础用法 ​

收起&展开——默认展开 ​

设置折叠时默认显示的最大 span 值——默认为 4 ​

Tsx 用法 ​

输入框插槽使用用法 ​

联动使用(使用第三方组件事件) ​

结合自己封装组件使用 ​

按钮操作使用 ​

TQueryCondition 参数配置 ​

1、代码示例 ​

html
<t-query-condition
  :opts="opts"
  @submit="conditionEnter"
  @handleEvent="handleEvent"
  :loading="loading"
/>
<!-- opts:配置项
     @submit：点击查询按钮 返回最终数据
     @handleEvent：每个查询条件的event:string,输入的值
     loading：查询按钮loading -->
<t-query-condition
  :opts="opts"
  @submit="conditionEnter"
  @handleEvent="handleEvent"
  :loading="loading"
/>
<!-- opts:配置项
     @submit：点击查询按钮 返回最终数据
     @handleEvent：每个查询条件的event:string,输入的值
     loading：查询按钮loading -->

2、配置参数（Attributes） ​

参数说明类型默认值
opts接收筛选器组件配置object无
loading查询按钮 loading 状态，请求数据时需要体现Booleanfalse
reset是否显示“重置”按钮Booleantrue
maxVisibleSpans设置展开的最大 span 数量Number4
boolEnter是否敲回车查询Booleantrue
isShowOpen是否显示收起和展开Booleantrue
isExpansion是否默认展开Booleanfalse
labelWidthlabelWidth 宽度String'120px'
btnCheckBind查询按钮配置（继承el-button所有属性）object{type: primary, size: default,btnTxt:'查询'}
btnResetBind重置按钮配置（继承el-button所有属性）object{ size: default,btnTxt:'重置'}

3、opts Attributes ​

参数说明类型默认值
label表单字段说明标题string-
className自定义 classstring-
isSelfCom是否使用自己封装的组件（即不需要el-option）Booleanfalse
placeholderplaceholder 提示语string-
labelRender自定义 label（render 函数 jsx 方式编写）function-
slotName自定义输入框插槽(作用域插槽解构接收{param/scope}返回当前所有表单初始值)string-
comp组件名称，可直接指定全局注册的组件，也可引入'elmentUI'如：Button 或者'el-button'string,component-
span控件占用的列宽，默认占用 1 列，最多 4 列 (独占一行)number1
defaultVal默认值--
bind渲染时组件会调用 v-bind 指定设置该配置更新元素的属性(继承第三方组件属性)object，function无
eventHandle配置组件事件，与写组件时change 等同理object本身值，当前formData数据

4、事件（events） ​

事件名说明返回值
handleEvent筛选器数据发生变化时触发event 标识, val：输入值,form:整个查询条件数据
submit点击筛选器查询按钮时触发form:整个查询条件数据
reset点击筛选器重置按钮时触发-

5、Slots ​

插槽名说明
querybar按钮操作插槽（位置基于重置后面）

6、Exposes（Method） ​

Method说明类型
queryState初始化表单数据object
resetData重置表单不调用查询接口Function
resetHandle重置表单调用查询接口Function