search组件

<template>
  <div class="search">
    <!-- 1.1.表单输入 -->
    <el-form :model="searchForm" ref="formRef" label-width="120px" size="large" id="search-form">
      <template v-for="item in searchConfig.formItems" :key="item.prop">
        <el-form-item :label="item.label" :prop="item.prop" v-if="hasPermission(item.permission)">
          <template v-if="item.type === 'input'">
            <el-input v-model="searchForm[item.prop]" :placeholder="item.placeholder" />
          </template>
          <template v-if="item.type === 'password'">
            <el-input
              show-password
              v-model="searchForm[item.prop]"
              :placeholder="item.placeholder"
            />
          </template>
          <template v-if="item.type === 'date-picker'">
            <el-date-picker
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              v-model="searchForm[item.prop]"
            />
          </template>
          <template v-if="item.type === 'select'">
            <el-select
              v-model="searchForm[item.prop]"
              :placeholder="item.placeholder"
              clearable
              filterable
            >
              <el-option
                v-for="opt in item.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </template>
        </el-form-item>
      </template>
      <i v-for="i in needIEle" :key="i"></i>
      <!-- 1.2.搜索按钮  -->
      <div class="btns" id="btns">
        <el-button size="large" icon="Refresh" @click="handleResetClick">重置</el-button>
        <el-button size="large" icon="Search" type="primary" @click="handleQueryClick">
          查询
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="page-search">
import type { ElForm } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { hasPermission } from '@/utils/auth'
interface IProps {
  searchConfig: {
    pageName: string
    formItems: any[]
  }
}
const props = defineProps<IProps>()
const emit = defineEmits(['queryClick', 'resetClick'])

// 1.创建表单的数据
const initialForm: any = {}
for (const item of props.searchConfig.formItems) {
  initialForm[item['prop']] = item['initialValue'] ?? ''
}
const searchForm = reactive(initialForm)

// 2.监听按钮的点击
const formRef = ref<InstanceType<typeof ElForm>>()
function handleResetClick() {
  formRef.value?.resetFields()
  emit('resetClick')
}
function handleQueryClick() {
  emit('queryClick', searchForm)
}
// 样式补充
const needIEle = ref(0)
onMounted(()=>{
  const allWidth: number | undefined = document.getElementById('search-form')?.clientWidth
  if(!allWidth) return
  const num = Math.floor(allWidth/394)
  const endNum = props.searchConfig.formItems.length % num
  if (num - endNum <= 1) return
  const needNum = num - endNum -1
  console.log(needNum,'nn');
  needIEle.value = needNum
  
})
defineExpose({
  handleQueryClick
})
</script>

<style scoped lang="less">
.search {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .el-form-item {
    width: 394px;
    margin-bottom: 0;
    padding: 10px 0;
    .el-range-editor--large.el-input__wrapper {
      width: 280px;
    }
    .el-select {
      width: 100%;
    }
  }
  i {
    width: 394px;
  }
  .btns {
    width: 394px;
    // flex-basis: 1;
    // flex: 1;
    // margin-left: auto;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

使用

 <page-search
      ref="userSearchRef"
      :searchConfig="searchConfig"
      @queryClick="handleQuery"
    ></page-search>

export const searchConfig = computed(() => ({
  pageName: 'park',
  formItems: [
    {
      label: '真实姓名',
      prop: 'realName',
      type: 'input',
      placeholder: '请输入真实姓名'
    },
    {
      label: '手机号',
      prop: 'cellPhone',
      type: 'input',
      placeholder: '请输入手机号'
    },
    {
      label: '车型品牌',
      prop: 'vmBrand',
      type: 'input',
      placeholder: '请输入车型品牌'
    },
    {
      label: '所属门店',
      prop: 'storeId',
      type: 'select',
      placeholder: '请选择',
      options: formatSelectOption(storeData.value, 'storeName', 'storeId'),
      permission: ['0', '1']
    }
  ]
}))