element+vue2的查询form表单封装成组件复用

<template>
  <el-form
    :inline="true"
    style="display:  flex; flex-direction: row; flex-wrap: wrap;flex: 1;"
    class="formClass"
    label-width="90px"
  >
    <el-form-item
      v-for="(item, index) in this.selectInline"
      :key="index"
      :label="item.label"
      style="margin:10px 10px 0 0;"
    >
      <el-input
        size="small"
        v-model="item.value"
        v-if="item.type == 'input'"
        :placeholder="item.label"
      ></el-input>
      <el-select
        v-else-if="item.type == 'select'"
        size="small"
        v-model="item.value"
        :placeholder="item.label"
        collapse-tags
        @change="SelectHandle(index)"
        filterable
        :multiple="item.multi"
      >
        <el-option
          v-for="(option, optionIndex) in item.options"
          :key="optionIndex"
          :label="option.ITEM_NAME"
          :value="option.ITEM_NAME"
        ></el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.type == 'time'"
        v-model="item.value"
        type="datetimerange"
        style="width:350px;"
        :picker-options="timeOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        align="right"
      ></el-date-picker>
    </el-form-item>
    <!-- <el-form-item label="子设备类型:" style="margin:10px 8px 0 0;">
      <el-select
        v-model="selectInline[2].plcType"
        size="small"
        :placeholder="'请选择'"
        autocomplete="off"
      >
        <el-option label="Pump" value="0" />
        <el-option label="Heater" value="1" />
        <el-option label="Scrubber" value="2" />
      </el-select>
    </el-form-item>-->
    <!-- <el-form-item label="厂商名称:" style="margin:10px 8px 0 0;">
      <el-select
        v-model="selectInline[2].factoryName"
        size="small"
        :placeholder="'请选择'"
        autocomplete="off"
      >
        <el-option label="Pump" value="0" />
        <el-option label="Heater" value="1" />
        <el-option label="Scrubber" value="2" />
      </el-select>
    </el-form-item>-->
    <!-- <el-form-item label="部门:" style="margin:10px 8px 0 0;">
      <el-select
        v-model="selectInline[2].factoryName"
        size="small"
        :placeholder="'请选择'"
        autocomplete="off"
      >
        <el-option label="Pump" value="0" />
        <el-option label="Heater" value="1" />
        <el-option label="Scrubber" value="2" />
      </el-select>
    </el-form-item>-->
    <!-- <el-form-item label="科室:" style="margin:10px 20px 0 0;">
      <el-select
        v-model="selectInline[2].factoryName"
        size="small"
        :placeholder="'请选择'"
        autocomplete="off"
      >
        <el-option label="Pump" value="0" />
        <el-option label="Heater" value="1" />
        <el-option label="Scrubber" value="2" />
      </el-select>
    </el-form-item>-->
    <el-form-item style="margin:10px 0 0 90px;">
      <el-button
        v-if="isaddWork"
        type="primary"
        icon="el-icon-plus"
        @click="addWorkFn"
        size="small"
        v-has="{name:'子设备v-has管理',value:'添v-has加'}"
      >添加</el-button>
      <el-button type="primary" @click="onSubmit" size="small" icon="el-icon-search">查询</el-button>
      <el-button type="primary" @click="onReset" size="small" icon="el-icon-refresh">重置</el-button>
      <el-button v-if="isdownload" type="primary" @click="onSubmit" size="small">下载</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "toolbar",
  props: {
    selectInline: {
      type: Array
    },
    inline: {
      type: Boolean
    },
    isdownload: {
      default: false,
      type: Boolean
    },
    isaddWork: {
      default: false,
      type: Boolean
    },
    data_fields: {
      type: Object
    },
    data_execl: {
      type: Array
    },
    excel_Alltitle: {
      type: String
    }
  },
  data () {
    return {
      timeOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 7
              )
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 30
              )
              picker.$emit("pick", [start, end])
            }
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 90
              )
              picker.$emit("pick", [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    data_fields (s1, s2) {
      console.log("s1", s1)
      console.log("s2", s2)
    },
    immediate: true,
    deep: true
  },
  methods: {
    // 添加工单
    addWorkFn () {
      this.$emit("addWorkFn", this.selectInline)
    },
    onSubmit () {
      this.$emit("onSubmit", this.selectInline)
    },
    SelectHandle (index) {
      this.$emit("SelectHandle", index)
    },
    downLoadAllData () {
      this.$emit("downLoadAllData")
    },
    onReset () {
      this.$emit("onReset")
    }
  }
};
</script>


<style scoped>
.formClass {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: space-between; */
}
</style>

使用组件的时候：

   <tool-bar
          :isaddWork="true"
          :inline="true"
          :selectInline="this.selectInline"
          @onSubmit="OnSubmit"
          @SelectHandle="SelectHandle"
          @onReset="onReset"
          @addWorkFn="addHandle"
        ></tool-bar>

selectInline 的数据格式：

   selectInline: [
        {
          field: "eqpName",
          label: "部门",
          type: "select",
          value: "",
          options: [],
        },
        {
          field: "chamberName",
          label: "科室",
          type: "select",
          value: "",
          multi: false,
          options: [],
        },
        {
          field: "plcName",
          label: "设备类型",
          type: "select",
          value: "",
          options: [],
          plcType: '',
          factoryName: '',
        },
        {
          field: "plcName",
          label: "厂商",
          type: "select",
          value: "",
          options: [],
          plcType: '',
          factoryName: '',
        },
        {
          field: "plcName",
          label: "子设备名称",
          type: "select",
          value: "",
          options: [],
          plcType: '',
          factoryName: '',
        },
      ],