common-ui/docs/components/search/base.md

CommonSearch 公共搜索

基础用法

---

:::demo

<template>
  <common-search
    :search-params="searchParams"
    :form-values="formValues"
    @change-event="changeEvent"
    @do-search="doSearch"
    @clear-search="clearSearch"
  >
    <slot></slot>
  </common-search>
</template>

<script setup>

import {ref} from 'vue'

const searchParams = ref([
  {
      label: '模板名称',
      name: 'specIdOrName',
      type: 'input',
      value: '',
      col: 6,
      attrs: {
        clearable: true
      }
    }
])

// 搜索项中某种表单元素出现变化时，可触发，进行联动逻辑处理
function changeEvent() {

}


// 搜索
function doSearch() {


}

// 清除搜索
function clearSearch() {}

const formValues = ref({})


</script>

<style scoped lang="scss"></style>

:::

配置参数

---

参数	说明	类型	是否必须
searchParams	卡片需要渲染的数组	Array[Object]，其中卡片内部字段	true
---- label	表单元素中文显示	String	true
---- value	表单元素v-model绑定值	String Array, Boolean	true
---- type	目前暂时支持的表单元素类型有： input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-picker	String	true
---- attrs	表单元素v-bind属性，支持原本element-plus中表单元素属性，另外对部分表单元素进行封装，支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解	Obkect	false
formValues	搜索组件返回搜索结构化数据	Object	true

事件

事件名称	说明	回调
doSearch	点击搜索时， 触发搜索按钮回调函数，callBack(data)= > {}	--
clearSearch	点击重置按钮时，触发清除搜索按钮回调 callBack(data)= > {}	--
changeEvent	搜索from表单中表单元素value变化时，触发change事件时，触发的回调 callBack(data)= > {}	--
blurEvent	搜索from表单中表单元素失去焦点触发blur事件时，触发的回调 callBack(data)= > {}	--