vue+element-ui的列表查询条件/筛选条件组件二次封装（Vue项目）——（查询条件多时；新增收起&展开功能。）

一、需求

对于后台管理系统项目必不可少的就是 “增删改查”；而 "查"，就会根据表格的列数来显示多少个查询/筛选条件；为了方便因此封装了查询条件（筛选条件）组件

二、组件功能

1、自动排列布局，每行显示4列（即4个条件）
2、内置“查询”和“重置”操作，并且按钮始终居于查询条件的最右侧
3、特定查询条件（如日期范围），可以配置占2列（span属性）
4、自动填入placeholder（日期范围除外）也可以自定义填入
5、默认输入框清空功能及下拉选择可以搜索选择功能
6、可以设置联调功能
7、可以自定义label
8、可以自定义输入框插槽
9、可以自定义 class
10、可以继承引入第三方组件的属性和事件（属性写在bind:{}里面——bind也可以是function，事件写在event:{}里面）
11、新增收起&展开功能

三、效果图

四、参数配置

1、代码示例

<t-query-condition :opts="opts" @submit="conditionEnter" :loading="loading" />
<!-- opts:配置项
     @submit：点击查询按钮 返回最终数据
     loading：查询按钮loading -->

1、配置参数（Attributes）

参数	说明	类型	默认值
opts	接收筛选器组件配置	object	无
loading	查询按钮 loading 状态，请求数据时需要体现	Boolean	false
reset	是否显示“重置”按钮	Boolean	true
boolEnter	是否敲回车查询	Boolean	true
labelWidth	labelWidth 宽度	String	'120px'
maxShow	最大展示数	Number	4
isShowOpen	是否显示收起和展开(若查询条件少于 4 个自动隐藏)	Boolean	true

2、opts Attributes

参数	说明	类型	默认值
label	表单字段说明标题	string	无
className	自定义 class	string	无
labelRender	自定义 label（render 函数 jsx 方式编写）	function	无
slotName	自定义输入框插槽(作用域插槽解构接收{param}返回当前所有表单初始值)	string	无
comp	组件名称，可直接指定全局注册的组件，也可引入'elmentUI'如：Button 或者'el-button'	string,component	无
span	控件占用的列宽，默认占用 1 列，最多 4 列 (独占一行)	number	1
changeEvent	默认事件为@input，可通过该属性指定其他事件（下拉选择和日期范围需要指定“change 事件”）	string	'input'
bind	渲染时组件会调用 v-bind 指定设置该配置更新元素的属性(继承第三方组件属性)	object	function	无
event	配置组件事件，与写组件时@change 等同理	object	无
child	子组件列表，类似 select 组件存在 options 子组件的则需要用到	Array	无
defaultVal	默认值	-	无

3. 事件（events）

事件名	说明	回调参数
change	筛选器数据发生变化时触发	Function(form: {[propName: dataIndex]: any})
submit	点击筛选器查询按钮时触发	Function(form: {[propName: dataIndex]: any})
reset	点击筛选器重置按钮时触发	Function(form: {[propName: dataIndex]: any})

五、具体代码

<template>
  <el-form
    :label-width="labelWidth"
    :form="form"
    size="small"
    class="t-query-condition"
    :style="{'grid-template-areas': gridAreas, 'grid-template-columns': `repeat(${colLength}, minmax(220px, ${100 / colLength}%))`}"
    @submit.native.prevent
  >
    <el-form-item
      v-for="(opt, i) in cOpts"
      :key="i"
      :label="opt.label"
      :style="{gridArea: i}"
      :class="[opt.className,{'render_label':opt.labelRender}]"
    >
      <!-- 自定义label -->
      <template #label v-if="opt.labelRender">
        <render-comp :createElementFunc="opt.labelRender" />
      </template>
      <!-- 自定义输入框插槽 -->
      <template v-if="opt.slotName">
        <slot :name="opt.slotName" :param="form"></slot>
      </template>
      <OptComponent
        v-if="!opt.slotName"
        v-bind="opt"
        :opt="opt"
        :form="form"
        :value="form[opt.dataIndex]"
        @change="change"
      />
    </el-form-item>
    <el-form-item
      v-if="Object.keys(cOpts).length > 0"
      label-width="0"
      style="grid-area: submit_btn"
      :class="['btn',{'flex_end': cellLength % colLength === 0}]"
    >
      <el-button
        type="primary"
        size="small"
        class="btn_check"
        @click="checkHandle"
        :loading="loading"
      >查询</el-button>
      <el-button v-if="reset" class="btn_reset" size="small" @click="resetHandle">重置</el-button>
      <el-button v-if="originCellLength > colLength&&isShowOpen" type="text" @click="openOrHide">
        {{ open ? '收起' : '展开'}}
        <i :class="open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </el-button>
      <slot name="querybar"></slot>
    </el-form-item>
  </el-form>
</template>

详情请看源码的queryCondition组件

补充使用：

1、现实el-select下拉选择如图：

六、组件地址

gitHub组件地址

gitee码云组件地址

七、相关文章

基于ElementUi再次封装基础组件文档

---

vue+element-ui的table组件二次封装