vue3.0+ts+elementplus 封装搜索组件

<template>
  <el-form :inline="true" :model="form">
    <template v-for="item in formItems" :key="index">
      <el-form-item :label="item.label">
        <component
          :is="getComponentType(item.type)"
          v-model="form[item.field]"
          :placeholder="item.placeholder"
          :options="item.options"
          @keyup.enter="onEnterKey"
        ></component>
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<!-- 
使用方法
     <iot-search
        :formItems="formItems"
        @search="handleSearch"
        @reset="handleReset"
        @enterKey="handleSearch"
      />


      定义
         const formItems = ref<any>([
      {
        type: "input",
        label: "名字",
        placeholder: "请输入名字",
        field: "name",
      },
      {
        type: "select",
        label: "类型",
        placeholder: "请选择类型",
        field: "type",
        options: [
          { label: "type1", value: "0" },
          { label: "type2", value: "1" },
        ],
      },
      {
        type: "select",
        label: "类型",
        placeholder: "请选择类型",
        field: "type",
        options: [], // 如果下拉框数组是从接口返回，可以使用map返回接口里面的数据，遍历formItems接收数据
      },
    ]);
-->
<script lang="ts" setup>
import { ElInput } from "element-plus";
import CustomSelect from "./CustomSelect.vue";
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  formItems: {
    type: Array as () => Array<{
      type: string;
      label: string;
      placeholder: string;
      field: string;
      options?: Array<{ label: string; value: string | number }>;
    }>,
    required: true,
  },
});

const emit = defineEmits(["search", "reset", "enterKey"]);

const form = ref<Record<string, any>>({});

props.formItems.forEach((item) => {
  form.value[item.field] = "";
});

const search = () => {
  emit("search", form.value);
};

const reset = () => {
  props.formItems.forEach((item) => {
    form.value[item.field] = "";
  });
  emit("reset");
};

const onEnterKey = () => {
  emit("enterKey", form.value);
};

const getComponentType = (type: string) => {
  switch (type) {
    case "input":
      return ElInput;
    case "select":
      return CustomSelect;
    default:
      return ElInput;
  }
};
</script>