基于Vue3+ele-Plus+Ts封装高级搜索组件，支持JSON数据传入生成搜索条件

创建搜索组件 

<script lang="ts" setup>
import { reactive } from 'vue'
import searchTable from 'hooks/searchTable'
import type { FormInstance } from 'element-plus'
// 拿到父组件传过来的数据
const props = defineProps<Iprops>()
const emits = defineEmits(['queryClick', 'resetClick'])
const { isHighSearch, switchSeachFn } = searchTable()
// 定义自定义属性接受到的属性接口
interface Iprops {
  searchConfig: { formItem: any[] }
}
const searchForm = reactive({})
const formRef = ref<FormInstance>()
function queryClick() {
  emits('queryClick', '查询')
}
function resetClick() {
  emits('resetClick', '重置')
}
</script>

<template>
  <div class="search">
    <!-- 1.输入关键字的表单 -->
    <div class="serach_form serach_form_high_fold" :class="{ high_search: isHighSearch }">
      <el-form ref="formRef" label-width="120px" class="form_grid" :model="searchForm">
        <!-- 将父组件传输过来的数据动态挂载 -->
        <template v-for="item in searchConfig.formItem" :key="item.prop">
          <el-form-item :label="item.label" prop="item.name">
            <!-- //条件渲染表单项目类型 -->
            <template v-if="item.type === 'input'">
              <el-input
                v-model="searchForm[item
                  .prop]" :placeholder="item.placeholder"
              />
            </template>
            <template v-if="item.type === 'datePicker'">
              <el-date-picker
                v-model="searchForm[item
                  .prop]"
                type="date"
                style="width: 100%;"
                :placeholder="item.placeholder"
              />
            </template>
            <template v-if="item.type === 'select'">
              <el-select
                v-model="searchForm[item
                  .prop]" :placeholder="item.placeholder" style="width: 100%;"
              >
                <el-option v-for="i in item.optionList" :key="i.value" :label="i.label" :value="i.value" />
              </el-select>
            </template>
            <template v-if="item.type === 'daterange'">
              <el-date-picker
                v-model="searchForm[item
                  .prop]" type="daterange" range-separator="-" start-placeholder="开始时间" end-pl aceholder="结束时间"
              />
            </template>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="serach_btn">
      <el-link class="margin_right" type="primary" :underline="false" @click="switchSeachFn">
        高级
        <el-icon>
          <svg-icon :name="isHighSearch ? 'ep:arrow-up' : 'ep:arrow-down'" />
        </el-icon>
      </el-link>
      <!-- 2.重置和搜索的按钮 -->
      <el-button type="primary" @click="queryClick">
        查询
      </el-button>
      <el-button @click="resetClick">
        重置
      </el-button>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
  .search {
    display: flex;
    padding-bottom: 2px;

    .serach_form {
      flex: 1;
      margin-right: 20px;

      .input_class {
        width: 100%;
        text-overflow: ellipsis;
        overflow-x: hidden;
      }

      .split_line {
        text-align: center;
        width: 8%;
      }
    }

    .serach_btn {
      width: 220px;
    }
  }
</style>

使用封装好的组件 search.config.ts

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

// 引入子组件pageSearch和配置文件
const handleResetClick = (val: any) => {
  console.log('1111', val)
}
const handleQueryClick = (val: any) => {
  console.log('2222', val)
}
</script>

<template>
  <div class="department">
    <div class="user">
      <div class="search">
        <PageSearch
          :search-config="searchConfig"
          @queryClick="handleQueryClick"
          @resetClick="handleResetClick"
        />
      </div>
    </div>
  </div>
</template>

<style>
</style>

自定义JSON

// 配置department的serach区域的数据
const searchConfig = {
  formItem: [
    {
      type: 'input', // 类型
      label: '票据号码', // label
      placeholder: '请输入票据号码', // 提示信息
      prop: 'name', // 绑定数据
    },
    {
      type: 'select',
      label: '出票日期',
      placeholder: '请选择出票日期',
      prop: 'leader',
      optionList: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 0,
        },
      ],
    },
    {
      type: 'datePicker',
      label: '汇票到期日',
      placeholder: '请输入汇票到期日',
      prop: 'shouj',
    },
    {
      type: 'daterange',
      label: '创建时间',
      prop: 'createAt',
    },
  ],
}

export default searchConfig