vue3 + ts + element-plus(封装form搜索栏)

 一、安装 element-plus

element-plus官网https://element-plus.org/zh-CN/

---

1、npm安装

npm install element-plus --save

2、yarn安装

yarn add element-plus

3、pnpm安装

pnpm install element-plus

4、main.ts导入（vue3）

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

二、封装搜索表单

<template>
  <el-card shadow="never">
    <el-form :inline="true" :model="form">
      <template v-for="(item, index) 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" round @click="search">搜索</el-button>
        <el-button round @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<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>

1、CustomSelect.vue文件

<template>
  <el-select :style="{ width: '100%' }" v-model="innerValue" :placeholder="placeholder" @change="handleChange" :multiple="isMultiple">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

const props = defineProps({
    modelValue: {
        type: [String, Number, Array],
        required: true
    },
    placeholder: String,
    options: {
        type: Array as () => { label: string; value: string | number }[],
        required: true
    },
    multiple: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:modelValue']);

const innerValue = ref(props.modelValue);

const handleChange = (value) => {
    innerValue.value = value;
    emit('update:modelValue', value);
};

watch(() => props.modelValue, (newValue) => {
    innerValue.value = newValue;
});

const isMultiple = ref(props.multiple);
</script>

三、使用封装的搜索表单

<template>
    <iot-search :formItems="formItems" @search="handleSearch" @reset="handleReset"
        @enterKey="handleSearch" />
</template>
<script lang="ts" setup>
import IotSearch from '@/components/iot-search.vue';

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接收数据
    },
])

const handleSearch = (formData: any) => {
   console.log(formData,'搜索表单')
}

const handleReset = () => {
  console.log('重置表单')
}
</script>