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

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

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

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

image.png

image.png

---

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

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

---

使用vue+elementUI，代码如下

BaseSearch.vue

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

---

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

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

---

 


  
    这里有个slot，可以在重置后放其他按钮，比如“导出”。
  

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

全局注册后，不需要再引入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);

持续更新中·