搜索栏封装

使用element-ui弄了个简单的表单搜索栏组件，适用于一般的管理后台。效果如下：

效果 点击搜索按钮

1.重置按钮默认存在，如果不需要可以通过showResetBtn隐藏
2.通过设置formOptions来设置需要的表单内容
3.设置btnItems来设置按钮，并且默认点击的时候都会返回整个表单内容
4.需要返回值在callBack中写入参数即可

btnItems: [
        {
          txt: '搜索', // 按钮名称
          type: 'primary', 
          callBack: (val) => {
            _self.test(val)
          }, // 回调，可通过回调返回整个表单内容，回调方法写在methods中，通过重新定义this
        },
        {
          txt: '导出',
          type: 'primary',
          callBack: () => {
            _self.test2()
          }, // 不需要返回值
        }
      ], // 按钮数据

5.表单类型包括input/select/time/date，可以根据需求进行更改

组件页面

// search-column.vue
<template>
  <div class="search-column-box">
    <el-form :model="formData" ref="_form" :inline="true">
      <el-form-item
        v-for="(item, index) in formOptions"
        :key="index"
        :prop="item.prop"
        :label="item.label ? item.label + '：' : ''"
        :rules="item.rules"
      >

        <!-- input -->
        <el-input
          v-if="item.element === 'el-input'"
          style="width: 199px"
          v-model="formData[item.prop]"
          :placeholder="item.placeholder || '请输入'"
        ></el-input>

        <!-- select -->
        <el-select
          v-if="item.element === 'el-select'"
          style="width: 199px"
          v-model="formData[item.prop]"
          clearable
        >
          <el-option
            v-for="option in item.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>

        <!-- time-select -->
        <el-time-select
          v-if="item.element === 'el-time-select' && !item.isRange"
          style="width: 199px"
          v-model="formData[item.prop]"
          :picker-options="item.pickerOptions"
          :is-range="item.isRange"
          placeholder="选择时间">
        </el-time-select>

        <el-time-picker
          v-if="item.element === 'el-time-select' && item.isRange"
          is-range
          v-model="formData[item.prop]"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>

        <!-- el-date-picker -->
        <el-date-picker
          v-if="item.element === 'el-date-picker' && !item.isRange"
          style="width: 199px"
          v-model="formData[item.prop]"
          :type="item.type"
          clearable
          :format="item.format"
          :placeholder="item.placeholder || '请选择'"
        ></el-date-picker>
        
        <el-date-picker
          v-if="item.element === 'el-date-picker' && item.isRange"
          v-model="formData[item.prop]"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="item.pickerOptions">
        </el-date-picker>


      </el-form-item>
      <el-form-item>
        <el-button v-if="showResetBtn" @click="reset">重置</el-button>
        <el-button
          v-for="(item, index) in btnItems"
          :key="index"
          :type="item.type"
          @click="item.callBack(formData)"
        >
          {{ item.txt }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'searchColumn',
  data() {
    return {
      formData: {},
    }
  },
  props: {
    formOptions: {
      type: Array,
      default() {
        return []
      },
    }, // 表单数组
    btnItems: {
      type: Array,
      default() {
        return []
      },
    }, // 按钮数组
    showResetBtn: {
      type: Boolean,
      default: true
    }, // 重置按钮，默认显示
  },
  mounted() {
    // 给表单添加属性
    this.formOptions.forEach((item) => {
      this.$set(this.formData, item.prop, item.default || item.default === 0 ? item.default : '')
    })
  },
  methods: {
    // 重置
    reset() {
      this.$refs._form.resetFields()
      this.formOptions.forEach((item) => {
        this.$set(this.formData, item.prop, item.default || item.default === 0 ? item.default : '')
      })
      this.$emit('reset', this.formData)
    },
  },
}
</script>

<style lang="scss" scoped>
.search-column-box {
}
</style>
</script>

<style lang="scss" scoped>
.search-column-box {
}
</style>

使用页

<template>
  <div>
    <search :formOptions="formOptions" :btnItems="btnItems" @reset="reset"/>
  </div>
</template>

<script>
  import search from './components/search'

export default {
  components: {
    search,
  },
 data() {
  const _self = this // 保存this，按钮回调用到
  const getPickerOptions = () => {
      let pickerOptions = {
        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]);
          }
        }]
      }
      return pickerOptions
    }; // 日期快捷方式
  return {
     formOptions: [
        {
          label: '意见内容', // 文字
          prop: 'content', // 绑定值
          element: 'el-input', // 显示类型
          placeholder: '请输入意见内容',
        },
        {
          label: '类型',
          prop: 'type',
          element: 'el-select',
          default: 1, // 默认值
          options: [
            { label: '给点意见', value: '1' },
            { label: '售后问题', value: '2' },
          ], // 选项
        },
        {
          label: '提交时间',
          prop: 'timeRange',
          element: 'el-time-select',
          pickerOptions: {
            start: '07:30',
            step: '00:15',
            end: '18:30'
          }, // 起止、间隔时间
          isRange: true, // 范围
        },
        {
          label: '提交日期',
          prop: 'dateRange',
          element: 'el-date-picker',
          type: 'week',  
          format: 'yyyy 第 WW 周', // 显示样式
        },
        {
          label: '选择日期范围',
          prop: 'dateRange1',
          element: 'el-date-picker',
          isRange: true, // 范围
        },
        {
          label: '选择日期范围',
          prop: 'dateRange2',
          element: 'el-date-picker',
          isRange: true,
          pickerOptions: getPickerOptions(), // 日期快捷方式
        },
      ], // 表单数据
      btnItems: [
        {
          txt: '搜索', // 按钮名称
          type: 'primary', 
          callBack: (val) => {
            _self.test(val)
          }, // 回调，可通过回调返回整个表单内容，回调方法写在methods中
        },
        {
          txt: '导出',
          type: 'primary',
          callBack: () => {
            _self.test2()
          },
        }
      ], // 按钮数据
  }
},
methods: {
  test(val) {
      console.log('搜索---', val)
    },
    test2() {
      console.log('导出---')
    },
},
}
</script>