vue-admin-template + element-ui实现搜索组件封装

因为最近要做项目的组件公共功能提取，尽量提高代码的可维护性，减少前端的开发工作量，故将前端常用的搜索项做了封装，这样页面使用时只用调用这个组件就可以了，话不多说直接上代码（ps也为了自己记录一下）

###常用搜索组件封装

<template>
  <el-form :inline="true">
    <el-form-item v-for="(item, index) in SearchBoxData" :key="index" :label="item.label">
		<!--date-time选项 -->
      <el-date-picker v-if="row.e == 'date'" v-model="search[item.name]" :type="item.option.type" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
		<!--input选项 -->
      <el-input v-if="item.e == 'input'" v-model="search[item.name]" clearable placeholder="请输入内容" />
		<!--select选项 -->
      <el-select v-if="item.e == 'select'" v-model="search[item.name]" clearable placeholder="请选择">
        <el-option v-for="ite in item.option" :key="ite.value" :label="ite.field" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="info" @click="query()">查询</el-button>
      <el-button type="warning" @click="clear()">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
     
  props: {
     
    SearchBoxData: {
     
      type: Object,
      required: true,
      default() {
     
      //设置默认值
        return {
     }
      }
    },
    search: {
     
      type: Object,
      default() {
     
        //设置默认搜索项
        var search_data = this.search
        for (var index in this.searchdata) {
     
          var tmp = this.searchdata[index]
          var key = tmp.name
          var val = ''
          search_data[key] = val
        }
        return search_data
      }
    }
  },
  methods: {
     
	query(){
     
		//调用父级事件,返回搜索项
		this.$emit('searchEvent', this.search)
	},
	clear(){
     
		//写清空事件
	}
  }
}
</script>

###页面调用

<template>
  <div>
    <SearchBox :SearchBoxData="SearchBoxData" :search="search" @searchEvent="setSearchEvent"></SearchBox >
  </div>
</template>
<script>
import AutoTable from '../../components/SearchBox'
export default {
     
  components: {
      SearchBox },
  data() {
     
    return {
     
      search：{
     
			//搜索项的默认值可以放在这里，也可以添加自定义的其它参数
		    //也可以将这一部分构建在searchBoxData中
	  }
      SearchBoxData: [
         {
      label: '版本', name: 'version_id', e: 'input' },
         {
      label: '状态', name: 'state', e: 'select',option:{
     field:'是',value:1},{
     field:'否',value:2'} },
         {
      label: '时间', name: 'time', e: 'date',option:{
     type: 'datetimerange'}},
      ]
    }
  },
  methods: {
     
  	setSearchEvent(data){
     
		//查询按钮的事件回调，当然也可以定义多个回调
		//datac参数就是回调传过来的参数
		console.log(data)
	}
  }
 
}
</script>

目前只封装了input,select,datepicker,如果你自己有需要也可以继续封装，如textarea,switch,select多选 等，这些功能在element-ui的文档中都能找到示例，相对来说组装还是比较简单的。