TableSearch 表格查询

说明

一般与表格组件配合使用，用于处理查询条件，支持多种搜索字段类型、动态属性、自定义组件和函数式配置。

（1）每一个表单项都使用y-border-label组件包裹，兼容现有的所有的element-plus 表单组件，同时也允许通过插槽自定义

（2）组件内部会自动根据配置项的组件类型和 label 自动生成placeholder（使用slot的自定义表单项除外）

（3）需要注意的是：配置项的 comp 属性接收一个组件，但是需要使用 markRaw() 包装

用法示例

多行模式

通常用于首行为模糊搜索，例如关键词，更多精准的搜索条件需要通过展开操作才展示。需要展示在首行的配置项设置 first:true 即可

关键词

状态

请选择

日期

分类

表单数据：

{
  "keyword": "",
  "status": "",
  "date": "",
  "category": []
}

<template>
  <div>
    <y-table-search :options="options" @search="onSearch" @reset="onReset" @change="onChange">
      <template #status="{ prop, value, item, form }">
        <el-select v-model="form[prop]" placeholder="请选择">
          <el-option label="选项1" value="1" />
          <el-option label="选项2" value="2" />
        </el-select>
      </template>
      <template #right>
        <el-button type="primary">新增</el-button>
      </template>
    </y-table-search>

    <div style="margin-top: 20px;">
      <h4>表单数据：</h4>
      <pre>{{ JSON.stringify(form, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, markRaw } from 'vue'
import { ElInput, ElSelect, ElDatePicker, ElCascader } from 'element-plus'

const form = ref({})

const options = ref([
  {
    prop: 'keyword',
    label: '关键词',
    first: true,
    innerAttrs: {
      placeholder: '请输入关键词',
      clearable: true
    }
  },
  {
    prop: 'status',
    label: '状态',
    custom: true
  },
  {
    prop: 'date',
    label: '日期',
    comp: markRaw(ElDatePicker),
    innerAttrs: {
      type: 'date',
      placeholder: '请选择日期'
    }
  },
  {
    prop: 'category',
    label: '分类',
    comp: markRaw(ElCascader),
    innerAttrs: {
      placeholder: '请选择分类',
      clearable: true
    }
  }
])

function onSearch(formData: Record<string, any>) {
  console.log('搜索', formData)
}

function onReset(formData: Record<string, any>) {
  console.log('重置', formData)
}

function onChange(formData: Record<string, any>) {
  console.log('变化', formData)
  form.value = { ...formData }
}
</script>

隐藏源码

单行模式

当options配置项中没有配置项为 first:true 时，即为单行模式，所有表单项平铺展示，且没有展开/收起操作

状态

请选择

日期

分类

表单数据：

{
  "status": "",
  "date": "",
  "category": []
}

<template>
  <div>
    <y-table-search :options="options" @search="onSearch" @reset="onReset" @change="onChange">
      <template #status="{ prop, value, item, form }">
        <el-select v-model="form[prop]" placeholder="请选择">
          <el-option label="选项1" value="1" />
          <el-option label="选项2" value="2" />
        </el-select>
      </template>
      <template #right>
        <el-button type="primary">新增</el-button>
      </template>
    </y-table-search>

    <div style="margin-top: 20px;">
      <h4>表单数据：</h4>
      <pre>{{ JSON.stringify(form, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, markRaw } from 'vue'
import { ElInput, ElSelect, ElDatePicker, ElCascader } from 'element-plus'

const form = ref({})

const options = ref([
  {
    prop: 'status',
    label: '状态',
    custom: true
  },
  {
    prop: 'date',
    label: '日期',
    comp: markRaw(ElDatePicker),
    innerAttrs: {
      type: 'date',
      placeholder: '请选择日期'
    }
  },
  {
    prop: 'category',
    label: '分类',
    comp: markRaw(ElCascader),
    innerAttrs: {
      placeholder: '请选择分类',
      clearable: true
    }
  }
])

function onSearch(formData: Record<string, any>) {
  console.log('搜索', formData)
}

function onReset(formData: Record<string, any>) {
  console.log('重置', formData)
}

function onChange(formData: Record<string, any>) {
  console.log('变化', formData)
  form.value = { ...formData }
}
</script>

隐藏源码

动态属性和值格式化

支持根据表单状态和组件状态动态调整字段的显示、禁用等属性。同时支持值格式化，可以在值更新时对值进行处理

关键词

类型

请选择

日期

-

表单数据：

{
  "keyword": "",
  "type": "",
  "userId": "",
  "department": "",
  "startTime": "",
  "endTime": ""
}

说明：

• 当"类型"选择"用户"时，"用户ID"字段会显示，"部门"字段会隐藏
• 当"类型"选择"部门"时，"部门"字段会显示，"用户ID"字段会隐藏
• 日期字段的placeholder会根据类型动态变化

<template>
  <div>
    <y-table-search :options="options" @search="onSearch" @reset="onReset" @change="onChange">
      <template #type="{ prop, value, item, form }">
        <el-select v-model="form[prop]" placeholder="请选择">
          <el-option label="用户" value="user" />
          <el-option label="部门" value="department" />
        </el-select>
      </template>
      <template #right>
        <el-button type="primary">搜索</el-button>
      </template>
    </y-table-search>

    <div style="margin-top: 20px;">
      <h4>表单数据：</h4>
      <pre>{{ JSON.stringify(form, null, 2) }}</pre>

      <h4>说明：</h4>
      <ul>
        <li>当"类型"选择"用户"时，"用户ID"字段会显示，"部门"字段会隐藏</li>
        <li>当"类型"选择"部门"时，"部门"字段会显示，"用户ID"字段会隐藏</li>
        <li>日期字段的placeholder会根据类型动态变化</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, markRaw } from 'vue'
import { ElSelect, ElDatePicker } from 'element-plus'
import type { DynamicPropsParams } from '@yun-elp/components'

const form = ref({})

const options = ref([
  {
    prop: 'keyword',
    label: '关键词',
    first: true
  },
  {
    prop: 'type',
    label: '类型',
    custom: true
  },
  {
    prop: 'userId',
    label: '用户ID',
    hidden: (params: DynamicPropsParams) => params.form.type !== 'user'
  },
  {
    prop: 'department',
    label: '部门',
    hidden: (params: DynamicPropsParams) => params.form.type !== 'department'
  },
  {
    prop: 'date',
    label: '日期',
    comp: markRaw(ElDatePicker),
    // 值格式化函数，返回对象时，对象的属性会被合并到formatForm中，原始字段会被删除
    valueFormat: (value: any, prop: string, form: Record<string, any>) => {
      return {
        startTime: value[0] ?? '',
        endTime: value[1] ?? ''
      }
    },
    innerAttrs: (params: DynamicPropsParams) => ({
      type: "datetimerange",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    })
  },
])

function onSearch(formData: Record<string, any>) {
  console.log('搜索', formData)
}

function onReset(formData: Record<string, any>) {
  console.log('重置', formData)
}

function onChange(formData: Record<string, any>) {
  console.log('变化', formData)
  form.value = { ...formData }
}
</script>

隐藏源码

API

Attributes

参数	说明	类型	默认值
options	字段配置	object / Function	[]
fold-text	收起按钮文本	string	'收起'
un-fold-text	展开按钮文本	string	'高级搜索'
default-fold	默认是否折叠	boolean	false
duration	折叠过渡时间	number	0.2
disabled-first	多行模式下，展开时是否自动禁用第一行	boolean	true
clear-on-fold	多行模式下，展开、收起时是否自动清空数据	boolean	true

TableSearchOption Attribute

参数	说明	类型	默认值
prop	字段的key	string	—
label	字段标签	string	—
first	是否展示在第一行	boolean	false
comp	字段组件类型	object	ElInput
value	字段初始值	any	""
hidden	是否隐藏	boolean / Function	false
disabled	是否禁用	boolean / Function	false
valueFormat	值格式化函数，在值更新时对值进行处理，可以返回单个值或对象（对象会被合并到formatForm中）	object / Function	—
borderAttrs	y-border-label支持的属性	object / Function	—
innerAttrs	给内部组件的属性	object / Function	—
custom	是否自定义组件，即使用slot	boolean	false

DynamicPropsParams Attribute

参数	说明	类型
form	当前表单的所有值	object
isFold	是否折叠状态	boolean
prop	当前字段名	string
value	当前字段的值	any

Events

事件名	说明	类型
search	点击搜索按钮时触发	Function
reset	点击重置按钮时触发	Function
change	表单值变化时触发	Function
fold	折叠状态变化时触发	Function

Slots

名称	说明	参数
right	右侧内容	—
[prop]	自定义字段组件，{prop} 为字段名	object

TableSearchItem Attribute

参数	说明	类型	默认值
prop	字段的key	string	—
label	字段标签	string	—
first	是否展示在第一行	boolean	false
comp	字段组件类型	object	ElInput
value	字段初始值	any	""
hidden	是否隐藏	boolean	false
valueFormat	值格式化函数，在值更新时对值进行处理，可以返回单个值或对象（对象会被合并到formatForm中）	Function / undefined	—
borderAttrs	y-border-label支持的属性	object	—
innerAttrs	给内部组件的属性	object	—
custom	是否自定义组件，即使用slot	boolean	false