组件库标题

Appearance

Return to top
On this page

SearchForm 搜索表单

基本使用

名称
班级
性别
图书
<template>
  <h-search-form :icons="icons" :searchParam="searchParam" :columns="searchColumns" :loading="loading"
                 @search="searchHandler"/>
</template>
<script lang="ts" setup>
import { Refresh, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'

const icons = ref({ search: Search, reset: Refresh })
// 默认参数
const searchParam = ref({
  class: '1'
})
const searchColumns = ref([
  {
    key: 'name', label: '名称', type: 'input'
  },
  {
    key: 'class',
    label: '班级',
    type: 'select',
    children: [
      {
        label: '一年级',
        value: '1'
      }
    ]
  },
  {
    key: 'sex', label: '性别', type: 'switch'
  },
  {
    key: 'book',
    label: '图书',
    type: 'radio-group',
    children: [{ label: '自然', value: 'zr' }]
  }
])
const loading = ref(false)

const searchHandler = e => {
  loading.value = true
  console.log(e, 'searchHandler')
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.site {
  padding: 20px;
}
</style>

<template>
  <h-search-form :icons="icons" :searchParam="searchParam" :columns="searchColumns" :loading="loading"
                 @search="searchHandler"/>
</template>
<script lang="ts" setup>
import { Refresh, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'

const icons = ref({ search: Search, reset: Refresh })
// 默认参数
const searchParam = ref({
  class: '1'
})
const searchColumns = ref([
  {
    key: 'name', label: '名称', type: 'input'
  },
  {
    key: 'class',
    label: '班级',
    type: 'select',
    children: [
      {
        label: '一年级',
        value: '1'
      }
    ]
  },
  {
    key: 'sex', label: '性别', type: 'switch'
  },
  {
    key: 'book',
    label: '图书',
    type: 'radio-group',
    children: [{ label: '自然', value: 'zr' }]
  }
])
const loading = ref(false)

const searchHandler = e => {
  loading.value = true
  console.log(e, 'searchHandler')
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.site {
  padding: 20px;
}
</style>

组件 API

Attributes 属性

参数说明类型可选值默认值
loading显示loading状态Booleantrue/falsefalse
icons按钮图标配置
searchParam默认搜索参数Object/{}
columns配置数据Array/[]

Events 事件

事件名说明回调参数
search点击按钮时触发{}

Slots 插槽

插槽名说明参数