Vue3.0使用Element-ui制作searchForm组件

        大家好，我是一个8年前端开发经验的新博主（实战react方向较多），最近两年互联网行业动荡，工作不稳定，想积累点自己的项目实践经验以备不时之需。

       第二弹！分享自定义搜索表单组件<SearchForm/>，使用vue3.0二次封装过的搜索表单组件,喜欢的记得点个赞哦~

知识点：

1、二次封装searchForm，减少重复标签

2、搜索表单以对象形式渲染，根据type类型区分标签

3、使用moment转换日期类型数据

直接先看效果图：（前提先安装UI组件库：npm element-plus --save；时间置换依赖包：npm moment --save）

首先，直接看一下我们封装完成的SearchForm组件代码！

<template>
    <el-form 
      ref="formRef"
      class="search-form"
      :model="formValues"
      inline
    >
      <el-form-item
        v-for="item in itemList"
        :key="item.name"
        :prop="item.name"
        :label="item.label"
      >
        <template v-if="item.type === 'input'">
            <el-input
              :style="item.style || 'width: 220px'"
              :placeholder="item.placeholder || '请输入'+item.label"
              :disabled="item.disabled"
              v-model.trim="formValues[item.name]"
              clearable
            ></el-input>
        </template>
        <template v-if="item.type === 'select'">
            <el-select
              :style="item.style || 'width: 220px'"
              :placeholder="item.placeholder || '请选择'+item.label"
              :disabled="item.disabled"
              v-model.trim="formValues[item.name]"
              clearable
            >
                <el-option
                    v-for="option in item.option"
                    :key="item.name + option.value"
                    :value="option.value"
                    :label="option.label"
                    clearable
                />
            </el-select>
        </template>
        <template v-if="item.type === 'date'">
            <el-date-picker
                :style="item.style || 'width: 220px'"
                :placeholder="item.placeholder || '请选择'+item.label"
                :disabled="item.disabled"
                :type="item.dateType"
                v-model.trim="formValues[item.name]"
                clearbale
            />
        </template>
        <template v-if="item.type === 'daterange'">
            <el-date-picker
                :style="item.style || 'width: 220px'"
                :range-separator="item.rangeSeparator"
                :disabled="item.disabled"
                :type="item.dateType"
                :format="item.format"
                v-model.trim="formValues[item.name]"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
            />
        </template>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchForm(formRef)" type="primary" icon="Search" :loading="loading">查询</el-button>
        <el-button @click="resetForm(formRef)" type="primary" plain icon="Refresh" v-if="props.isReset">重置</el-button>
      </el-form-item>
    </el-form>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue';
  import moment from 'moment'

  let formValues = ref({});
  const formRef = ref();
  const emit = defineEmits(['handleSearch','handleReset']);
  const props = defineProps({
    itemList: {
        type: Array,
        default: {
          type: 'input', // 如type为'date'，可另外接收dateType属性作为日期选择器类型:'date'|'week|'month'|'year'|'dates'(日期多选)
          label: '标题',
          name: 'keyword',
          placeholder: '请输入关键字',
          hidden: false,
        }
    },
    initData: {  // 搜索表单初始值
       type: Object,
       default: {}
    },
    isReset: {  // 是否显示重置按钮
        type: Boolean,
        default: false
    },
    loading:{
        type: Boolean,
        default: false
    },
    onFinish: {   // 父组件搜索事件
      type: Function,
      default: () => {},
    },
  })
  
  onMounted(() => {
    if(props.initData){
        formValues.value = props.initData
    }
  })
  
  const searchForm = (formEl) => {
    if (!formEl) return
    const fields = JSON.parse(JSON.stringify(formValues.value));
    props.itemList.forEach((item) => {
        if(item.type === 'date' && fields[item.name]){
            fields[item.name] = moment(fields[item.name]).format(item.format || 'YYYY-MM-DD')
        }else if(item.type === 'daterange' && fields[item.name]){
            fields[item.name] = [
                moment(fields[item.name][0]).format(item.format || 'YYYY-MM-DD'),
                moment(fields[item.name][1]).format(item.format || 'YYYY-MM-DD'),
            ]
        }
    })
    emit('handleSearch', fields)
  }
  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields();
    formValues.value = {};
    emit('handleSearch', JSON.parse(JSON.stringify(formValues.value)))
  }
  
</script>

然后就是组件的调用了

<template>
    <div class="content-box">
        <SearchForm 
            :itemList="searchConfig"
            :initData="initData"
            :isReset="true"
            :loading="loading"
            @handleSearch="handleSearch"
        />
    </div>
</template>
<script setup>
import { ref, onMounted, h } from 'vue';
import SearchForm from '@/components/SearchForm/index.vue';

const loading = ref(false)
const initData = ref({})
const searchValues = ref({})
const searchConfig = ref([
    {
        label: '标题:',
        name: 'title',
        type: 'input',
    },

    {
        label: '创建人:',
        name: 'senderName',
        type: 'input',
    },
    {
        label: '栏目名称:',
        name: 'columnName',
        type: 'input',
    },
    {
        label: '类型:',
        name: 'conType',
        type: 'select',
        option: [
        {
            value: '2',
            label: '图片新闻',
        },
        {
            value: '1',
            label: '通知公告',
        },
        ],
    },
    {
        label: '创建时间:',
        name: 'createTime',
        placeholder: '创建时间',
        type: 'daterange',
        dateType: 'daterange'
    },
    {
        label: '实际发布时间:',
        name: 'sendTime',
        placeholder: '实际发布时间',
        type: 'daterange',
        dateType: 'daterange'
    },
])

// 查询
const handleSearch = (fieldsValue) => {
    searchValues.value = fieldsValue;
}


</script>

代码部分结束！希望对你有所帮助！喜欢的记得点个赞哦~