vue ts基于elementui 的多条件搜索弹窗组件封装

vue saas项目，有很多Table，大部分Table都有多条件搜索功能，而多条件搜索功能每次写起来都很繁琐、代码也夸张的多，而且多人开发情况下可控性太低;

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

最终界面如下

现状分析

项目使用的是elementui框架，多条件搜索表单提交，需要使用el-form组件来封装，复杂点就是表单项有很多种，配置项包括input、select、datePicker、daterange、cascader等，每一项的名称label、后端接收字段名code、选项属性type等，绑定的属性方法都不尽相同。所以不能通过普通的绑定个别属性的方式来处理，而slot插槽的方式也无法简化，最终决定通过传递一个配置项数组的形式来解析生成相应的结构。

实现代码思路

子组件

   配置文件  popoverSearchData.d.ts

  /*
  * popoverSearchData.ts
  *
  * 数据类型 - popover-search 组件
  */


  export interface SelectOptionItem {
    value: String | Number;
    label: String | Number;
  }

  export class HeaderConfigItem {
    public colSpan: number;
    public labelWidth: string;
    public label: string;
    public code: string;
    public props?: any;
    public type?: 'select' | 'input' | 'datePicker' | 'daterange' | 'cascader';
    public options?: SelectOptionItem[];
  }

 

父组件

TableMixin

public screenSearchSubmit(obj: object) {
    // 搜索相关业务需求 可在此补充
    this.getTableData()
    this.searchVisible = false
}
public closeDropSearch() {
   this.searchVisible = false
}

不定期会分享项目的组件封装，如果有哪里不合理，请各路大神多多指教。