vue3+Element Plus功能组件封装——条件搜索（输入框（可新增删除），下拉选择框，日期选择）

<template>
  <el-form :inline="true" :model="form" size="small">
    <el-form-item v-for="(item, index) in form.searchList" :key="index" :label="item.label">
      <el-input
        v-if="item.type === 'input'"
        v-model="item.value"
        :placeholder="'请输入' + item.label"
        @keyup.native.enter="search"
        @click.native="handleClick(index)"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="search"></el-button>
        </template>
      </el-input>
      <el-select
        v-else-if="item.type === 'select'"
        v-model="item.value"
        :placeholder="'请选择' + item.label"
        @change="search"
      >
        <el-option
          v-for="option in item.options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        ></el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.type === 'date'"
        v-model="item.value"
        type="daterange"
        :placeholder="'请选择' + item.label"
        @change="search"
      ></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button type="text" @click="handleAdd">新增条件</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script setup>
import { ref } from 'vue';
 
const form = ref({
  searchList: [
    { label: '用户名', type: 'input', value: '' },
    { label: '状态', type: 'select', value: '', options: [{ label: '启用', value: 'enabled' }, { label: '禁用', value: 'disabled' }] },
    { label: '注册时间', type: 'date', value: '' },
  ],
});
 
const search = () => {
  console.log('执行查询操作', form.value.searchList);
};
 
const reset = () => {
  form.value.searchList.forEach(item => {
    if (item.type === 'input') {
      item.value = '';
    } else if (item.type === 'select') {
      item.value = '';