AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonSearch 公共搜索

基础用法

模板名称

<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>



<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表单元素中文显示Stringtrue
---- value表单元素v-model绑定值String Array, Booleantrue
---- type目前暂时支持的表单元素类型有： input/textarea/select/input-num/radio/cascader/switch/checkbox/check-group/date-pickerStringtrue
---- attrs表单元素v-bind属性，支持原本element-plus中表单元素属性，另外对部分表单元素进行封装，支持自定义属性传递。下面有单独对自定义封装表单元素进行讲解Obkectfalse
formValues搜索组件返回搜索结构化数据Objecttrue

事件

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