vue3+ts-搜索框组件封装

1.创建如下文件夹

• 父组件,传输数据

src\view\main\system\department\department.vue

• 通用子组件

src\view\main\system\department\c-cpns\page-search.vue

• 配置数据

src\view\main\system\department\config\search.config.ts

department.vue

<template>
  <div class="department">
    <div class="user">
      <div class="search">
        <!-- 将searchConfig数据传输到子组件,方便数据封装 -->
        <page-search @queryClick="handleQueryClick" @resetClick="handleResetClick"
          :searchConfig="searchConfig"></page-search>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 引入子组件pageSearch和配置文件
import pageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/search.config'
</script>
<style lang="scss" scoped>
</style>

page-search.vue

<template>
  <div class="search">
    <!-- 1.输入关键字的表单 -->
    <el-form label-width="80px" :model="searchForm" ref="formRef">
      <el-row :gutter="20">
        <!-- 将父组件传输过来的数据动态挂载 -->
        <template v-for="item in searchConfig.formItem" :key="item.prop">
          <el-col :span="8">
            <el-form-item :label="item.label" prop="item.name">
              //条件渲染表单项目类型
              <template v-if="item.type === 'input'">
                <el-input :placeholder="item.placeholder" v-model="searchForm[item.
                prop]">
                </el-input>
              </template>
              <template v-if="item.type === 'datePicker'">
                <el-date-picker v-model="searchForm[item.
                prop]" type="daterange" range-separator="-" start-placeholder="开始时间" end-pl                aceholder="结束时间" />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="btn">
      <!-- 2.重置和搜索的按钮 -->
      <el-button icon="Refresh" @click="resetClick">重置</el-button>
      <el-button type="primary" icon="Search" @click="search">搜索</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
// import searchConfig from '@/view/main/system/department/config/search.config'
// 定义自定义属性接受到的属性接口
interface Iprops {
  searchConfig: { formItem: any[] }
}
// 拿到父组件department传过来的数据
const props = defineProps<Iprops>()
const searchForm = reactive({})
// const formRef = ref<InstanceType<typeof ElForm>>()
const formRef = ref<FormInstance>()

</script>

<style lang="scss" scoped>
.search {
  background-color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;

  .el-form-item {
    padding: 20px 30px;
    margin-bottom: 0;
  }

  .btn {
    text-align: right;
  }
}
</style>

search.config.ts

// 配置department的serach区域的数据
const searchConfig = {
  formItem: [
    {
      type: 'input',
      label: '部门名称',
      placeholder: '请输入查询的部门名称',
      prop: 'name'
    },
    {
      type: 'input',
      label: '部门领导',
      placeholder: '请输入查询的领导名称',
      prop: 'leader'
    },
    {
      type: 'datePicker',
      label: '创建时间',
      prop: 'createAt'
    }
  ]
}
export default searchConfig