vue封装表单搜索组件

vue封装表单搜索组件
目前使用的是vxe-table中的vxe-form,可替换为el-form

组件代码 SearchForm.vue

<template>
  <div class="form-search">
    <vxe-form
      :data="formData"
      :collapse-status.sync="collapseStatus"
      custom-layout
      @submit="submitEvent"
    >
      <vxe-form-item v-if="showFilterSelect" span="3">
        <template #default>
          <slot name="filterSelect" />
        </template>
      </vxe-form-item>
      <template v-for="(item, index) in formItems">
        <vxe-form-item
          :key="index"
          :title="item.title"
          :field="item.field"
          :span="item.span"
          :folding="item.folding"
        >
          <!-- @input="submitEvent" -->
          <template #default="{ data }">
            <component
              :is="item.component"
              v-model.trim="data[item.field]"
              :placeholder="item.placeholder || ''"
              :options="item.options"
              :size="item.size || 'mini'"
              :clearable="item.clearable || true"
              :type="item.type"
              :ref="item.field"
            />
          </template>
        </vxe-form-item>
      </template>
​
      <vxe-form-item :item-render="{}" folding>
        <template #default>
          <slot name="otherSearch" />
        </template>
      </vxe-form-item>
​
      <div>
        <vxe-form-item
          align="center"
          :collapse-node="showAllFold ? true : false"
        >
          <template #default>
            <vxe-button type="submit" size="mini" status="primary"
              >Search</vxe-button
            >
            <vxe-button type="reset" size="mini" @click="resetEvent"
              >Reset</vxe-button
            >
          </template>
        </vxe-form-item>
      </div>
    </vxe-form>
  </div>
</template>
​
<script>
export default {
  name: "SearchForm",
  props: {
    formData: {
      type: Object,
      required: true,
    },
    submitEvent: {
      type: Function,
      required: true,
    },
    resetEvent: {
      type: Function,
      required: true,
    },
    formItems: {
      type: Array,
      required: true,
    },
    // 其他搜索弹窗
    drawerDialogStatus: {
      type: Boolean,
    },
    // 展开/收起
    showAllFold: {
      type: Boolean,
      default: false,
    },
    //展示是否带有模糊搜索下拉
    showFilterSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      collapseStatus: true,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped></style>

页面中使用

   <SearchForm
      :form-data="formData"
      :submit-event="submitEvent"
      :form-items="searchItem.formItems"
      :reset-event="resetEvent"
      :show-all-fold="false"
      :show-filter-select="false"
    />

//引入组件
import SearchForm from "@/components/SearchForm/index.vue";
//搜索项数据
import { searchItem } from "./config.js";
//注册
  components: {
    SearchForm,
  },
     // 搜索表单数据
      formData: {
        date: "",
        due_date: "",
        number: "",
        from_des: "",
        to_des: "",
        workflow_status: "",
        line_status: "",
      },
       // 搜索项
      searchItem: searchItem,

搜索项数据 config.js

export const searchItem = {
  formItems: [
    {
      field: "date",
      span: 4,
      component: "vxe-input",
      placeholder: "start date",
      type: "date",
      size: "mini",
      format: "yyyy-MM-dd",
      clearable: true,
    },
    {
      field: "due_date",
      span: 4,
      component: "vxe-input",
      placeholder: "end date",
      type: "date",
      size: "mini",
      format: "yyyy-MM-dd",
      clearable: true,
    },
    {
      field: "from_des",
      span: 3,
      component: "vxe-input",
      placeholder: "from_des",
      size: "mini",
      clearable: true,
    },
    {
      field: "to_des",
      span: 3,
      component: "vxe-input",
      placeholder: "to_des",
      size: "mini",
      clearable: true,
    },
    {
      field: "workflow_status",
      span: 4,
      component: "vxe-input",
      placeholder: "workflow_status",
      size: "mini",
      clearable: true,
​
    },
    {
      field: "line_status",
      span: 3,
      component: "vxe-select",
      placeholder: "line_status",
      size: "mini",
      clearable: true,
      folding: true,
      options: [
        {
          label: "Shipped",
          value: "1",
        },
        {
          label: "Received",
          value: "3",
        },
        {
          label: "Exception",
          value: "5",
        }
      ],
    },
  ],
};
​

​