vue、elForm表单查询区封装

日常中后台，查询区域是避免不了的，今天感觉cv不如封装好，所以就…

首先创建个.vue文件，(hyf-form)

<!--
  目前支持：input，select，单选日期，日期范围,多选 待完善
  labelWidth: 表单名宽度
  formModel: 查询所需字段，需要与fromItems中的filed名称一样
  elRow: 自适应
  itemStyle: 内边距
  footer:  表单中自适应的插槽，用于放： 查询，重置等
  footer-btn: 表单外插槽另起一行，用于放： 查询，重置等
-->
<template>
  <div>
    <el-form ref="form" :label-width="labelWidth" :model="formModel">
      <el-row>
        <span v-for="item in fromItems" :key="item.label">
          <el-col v-bind="elRow">
            <el-form-item :label="item.label" :itemStyle="itemStyle" :rules="item.rules" :prop="item.filed">
              <template v-if="item.type === 'input'">
                <el-input :placeholder="item.placeholder" clearable v-model="formModel[item.filed]"/>
              </template>
              <template v-else-if="item.type === 'select'">
              <el-select v-model="formModel[item.filed]" :placeholder="item.placeholder" style="width: 100%;" clearable>
                <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
              </template>
              <template v-else-if="item.type === 'multiple'">
              <el-select v-model="formModel[item.filed]" :placeholder="item.placeholder" multiple clearable
                         collapse-tags  style="width: 100%;">
                <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
              </template>
              <template v-else-if="item.type === 'time'">
                   <el-date-picker :placeholder="item.placeholder" clearable v-model="formModel[item.filed]"
                                   style="width: 100%;"/>
              </template>
              <template v-else-if="item.type === 'daterange'">
                   <el-date-picker :placeholder="item.placeholder" clearable v-model="formModel[item.filed]"
                                   style="width: 100%;" type="daterange" range-separator="至"
                                   :start-placeholder="item.start" :end-placeholder="item.end"/>
              </template>
            </el-form-item>
          </el-col>
        </span>
        <!--  表单中自适应的插槽，用于放： 查询，重置等  -->
        <el-col v-bind="elRow">
          <div style="text-align: center; line-height: 40px">
            <div class="footer">
              <slot name="footer"/>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!--  表单外插槽另起一行，用于放： 查询，重置等  -->
    <div class="footer-btn">
      <slot name="footer-btn"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "hyfForm",
  props: {
    fromItems: {
      type: Array,
      default: () => [],
      required: true
    },
    itemStyle: {
      type: Object,
      default: () => ({padding: "10px 30px"})
    },
    formModel: {
      type: Object,
      default: () => {
      },
      required: true
    },
    elRow: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      })
    },
    labelWidth: {
      type: String,
      default: '80px'
    },
  },
}
</script>

使用方式

   <hyf-form :from-items="fromItems" :form-model="formModel" ref="form">
      <template #footer-btn>
        <div style="text-align: right">
          <el-button size="mini" @click="query"> 查询</el-button>
          <el-button size="mini" @click="reset"> 重置</el-button>
        </div>
      </template>
    </hyf-form>

配置项

      fromItems: [
        {
          placeholder: "请输入",
          label: "日期", // 展示名称
          type: "time", // 类型
          filed: 'time',  // 后台接收字段
          rules: {required: true, message: "请选择日期", trigger: "change"},
        },
        {
          placeholder: "请输入用户名",
          label: "用户名",  // 展示名称
          type: "input",// 类型
          filed: 'user', // 后台接收字段
          rules: {required: true, message: "请输入活动名称", trigger: "blur"},
        },
        {
          placeholder: "我的",
          label: "我的 ",  // 展示名称
          type: "select",// 类型
          filed: 'my', // 后台接收字段
          options: [
            {label: '测试1', value: '1'},
            {label: '测试2', value: '2'},
          ],
        },
        {
          placeholder: "我的",
          label: "多选",  // 展示名称
          type: "multiple",// 类型
          filed: 'multiple', // 后台接收字段
          options: [
            {label: '测试1', value: '1'},
            {label: '测试2', value: '2'},
          ],
        },

        {
          placeholder: "请输入",
          label: "日期范围",
          start: '开始日期',
          end: '结束日期',
          type: "daterange", // 类型
          filed: 'daterange',  // 后台接收字段
        },
      ],
      formModel: {
        user: '',
        my: '',
        time: '',
        daterange: '',
        multiple: '',
      },

完毕：实际应用中还有很多，简单写了几个，待完善