vue+elementUI 搜索栏公共组件封装，封装多搜索条件通

项目中经常有这种搜索条件，每次都要写form 结构, 还要写查询，重置的方法，都是重复代码。
每次写起来都很繁琐、代码也夸张的多，而且多人开发情况下可控性太低;

所以考虑对 多条件搜索 做一个封装，统一配置引用，达到一次注册、全局使用，提升开发维护效率和界面统一的效果。

文末附加 一次注册全局使用 的方法。

image.png image.png

---

对这种搜索条件进行了封装，支持在业务组件中异步加载下拉框数据。支持下拉框默认选中初始值。

添加了自动触发搜索的方法，能应对多种场景。

---

使用vue+elementUI，代码如下

BaseSearch.vue

<!-- 
    *名称：弹窗的搜索条件组件
    *功能：methods
      1.点击搜索的方法：@search
      2.搜索条件 props : formItemList
-->

<template>
    <div class="dialog-search">
        <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">

             <el-form-item v-for="(item,index) in formItemList" :key="index" :label="item.label">
                <el-select v-if="item.type=='select'" v-model="formInline[item.param]" placeholder="请选择" size="mini">
                    <el-option v-for="(item2,index2) in item.selectOptions" :key="index2" :label="item2.name" :value="item2.value"></el-option>
                </el-select>
                <el-input v-if="item.type=='input'" v-model="formInline[item.param]" size="mini" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item style="width:10rem">
                <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
                <el-button type="" size="mini" @click="resetForm('ruleForm')">重置</el-button> 
            </el-form-item>

            <!-- 可用于显示其他按钮 -->
            <slot></slot>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "BaseSearch",
    props:{
        emitSearch:{   // 是否立即执行搜索
            type: Boolean,
            default: false
        },
        formItemList:{ 
            type: Array,
            default(){
                return [
                    {
                        label: '下拉框',
                        type: 'select',
                        selectOptions:[{name:111,value:111}],
                        param: 'company',
                        defaultSelect: "222",  // 下拉框默认选中项
                    },
                    {
                        label: '输入框',
                        type: 'input',
                        param: 'name'
                    }
                ]
            }
        }
    },
    data(){
        let formInline={}
        for(const obj of this.formItemList){
            formInline[obj.param] = obj.defaultSelect || "";
        }
        return{
            formInline,
        }
    },
    watch:{
        emitSearch(newVal,oldVal){  // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法
            if(newVal){
                console.log("此时触发--立即执行搜索")
                this.$emit("search", this.formInline);
            }
        },
        formItemList:{  
            handler(newVal,oldVal){
                for(const obj of this.formItemList){
                    if(obj.defaultSelect){
                        formInline[obj.param] = obj.defaultSelect
                    }
                }
            },
            deep:true
        }
    },
    methods:{
        onSubmit() {
            // console.log('submit!',this.formInline);
            this.$emit('search',this.formInline)

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            let formInline={}
            for(const obj of this.formItemList){
                // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
                formInline[obj.param] = "";  // 所有筛选条件清空

            }
            this.formInline=formInline

            this.$emit('search',this.formInline)
        }
    }
}
</script>




<style lang="less" scoped>
.dialog-search{
    margin: 0 1rem;
    text-align: left;
    /deep/ .el-form-item__content{
        width: 16rem;
        .el-input{
            width: 16rem;
        }
        .el-select{
            .el-input__inner{
                // height: 3.2rem;
                width: 16rem;
            }
        }
    }
}
</style>

basesearch 组件大家也可以结合自己需要，再往里填充一些树形选择，单选框，复选框元素进去~~~

---

使用的时候只需要引入BaseSearch.vue

再传入formItemList，即能生成带下拉框和输入框的搜索条件，绑定search方法

---

<templete>
 <BaseSearch :formItemList="formItemList" :emitSearch="emitSearch"  @search="search" />

<BaseSearch :formItemList="formItemList"  @search="search" >
  <templete>
    <span>这里有个slot，可以在重置后放其他按钮，比如“导出”。</span>
  </templete>
</BaseSearch >

</templete>

<script>
 import BaseSearch from "@/components/BaseSearch.vue"
  export default {
    components:{
      BaseSearch
    },
    data() {
      return {
        dialogVisible: false,
        emitSearch: false,
        formItemList:[
          {
              label: '所属单位',
              type: 'select',
              selectOptions:[{name:111,value:111}],
              param: 'company'
          },
          {
              label: '化学品名称',
              type: 'input',
              param: 'name'
          },
          {
              label: '是否停用企业',
              type: 'select',
              selectOptions:[{name:111,value:111}],
              param: 'stop'
          },
       {
              label: '下拉框222',
              type: 'select',
              selectOptions:[{name:111,value:111}],
              param: 'parm222'
          },
        ],
       
      };
    },
  mounted(){
     // 此时请求下拉框的数据接口
    // axios。。。。
    //  this.formItemList[3].selectOptions = res.data
    // 其他下拉框的选项赋值
    //  这里判断 是否立即执行搜索
    // 全部下拉框的数据都塞进去后执行搜索
    // this.emitSearch=true

  },
    methods: {
      handleOpen(typeVal){
          this.dialogVisible=true
          this.formItemList[3].defaultSelect=typeVal || ""  // 打开弹窗时下拉框赋默认选中的值
        this.emitSearch=true
        
      },
      handleClose(done) {
        this.dialogVisible=false
      },
    search(params){  // 搜索条件改变时
        this.searchTableList(params)
      }
    }
  };
</script>

附加：全局注册组件的方法

全局注册后，不需要再引入BaseSearch ，直接用就行~

index.js

import BaseSearch from "./BaseSearch";

const array = [ BaseSearch];

const baseComponents = {
    install(vue) {
        for (let i = 0; i < array.length; i++) {
            vue.component(array[i].name, array[i]);
        }
    },
};

export default baseComponents;

main.js

import baseComponents from "./components/index";
Vue.use(baseComponents);

持续更新中·