![](https://i-blog.csdnimg.cn/blog_migrate/ab49203981e07df18fffe627de09669d.png)
1.创建如下文件夹
![](https://i-blog.csdnimg.cn/blog_migrate/5e3c794da0af91fa5cb0b1dfd7ecfc69.png)
父组件,传输数据
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