2024-07-31 TQueryCondition条件查询组件新增"以下拉方式展示更多条件"功能，效果如下：

vue2 二次封装axios header_element-plus

一、需求

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

二、组件功能

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

三、最终效果

vue2 二次封装axios header_typescript_02

四、参数配置

1、代码示例

<t-query-condition :opts="opts" @submit="conditionEnter" @handleEvent="handleEvent" :loading="loading" />
<!-- opts:配置项
     @submit：点击查询按钮 返回最终数据
     @handleEvent：每个查询条件的event:string,输入的值
     loading：查询按钮loading -->

1、配置参数（Attributes）

参数

说明

类型

默认值

opts

接收筛选器组件配置

object

无

loading

查询按钮 loading 状态，请求数据时需要体现

Boolean

false

reset

是否显示“重置”按钮

Boolean

true

maxVisibleRows

收起时设置默认展示行数

Number

1

boolEnter

是否敲回车查询

Boolean

true

isShowOpen

是否显示“收起和展开”

Boolean

true

packUpTxt

收起文案

String

‘收起’

unfoldTxt

展开文案

String

‘展开’

isExpansion

是否默认展开

Boolean

false

labelWidth

labelWidth 宽度

String

‘120px’

btnCheckBind

查询按钮配置（继承el-button所有属性）

object

{type: primary, size: default,btnTxt:'查询'}

btnResetBind

重置按钮配置（继承el-button所有属性）

object

{ size: default,btnTxt:'重置'}

isFooter

自定义按钮(设置:footer="false"不显示按钮)

Boolean

true

configChangedReset

更新 opts 是否重置（默认重置）

Boolean

false

isShowWidthSize

是否开启动态设置每行显示数

Boolean

false

widthSize

每行显示多少项

Number

4

isDropDownSelectMore

是否以下拉方式展示更多条件

Boolean

false

1-1 以下拉方式展示更多条件–配置参数（Attributes）

参数

说明

类型

默认值

popoverAttrs

el-popover配置及中文文案

object

具体看源码

moreCheckList

数据源

Array

-

-----label

标题

string

-

-----comp

组件名称，可直接指定全局注册的组件

string,component

-

-----isSelfCom

是否使用自己封装的下拉组件（即没有el-option）

Boolean

false

-----prop

接收字段（即后台接收字段）

string

-

-----bind

组件配置参数（Attributes）

object

-

-----slotName

自定义输入框插槽

string

-

-----span

控件占用的列宽，默认占用 1 列，最多 4 列 (独占一行)

number

1

-----changeEvent

事件名称

string

-

-----defaultVal

默认值

string

-

-----type

element 组件type(radio,checkbox,select-arr,select-obj)

string

-

-----arrLabel

el-select 组件options label显示

string

label

-----arrKey

el-select 组件options key显示

string

key

-----list

el-select 组件options 数据标识

string

-

-----listTypeInfo

el-select 组件options 数据源

object

-

2、opts Attributes

参数

说明

类型

默认值

label

表单字段说明标题

string

-

className

自定义 class

string

-

placeholder

placeholder 提示语

string

-

labelRender

自定义 label（render 函数 jsx 方式编写）

function

-

slotName

自定义输入框插槽(作用域插槽解构接收{param}返回当前所有表单初始值)

string

-

comp

组件名称，可直接指定全局注册的组件，也可引入’elmentUI’如：Button 或者’el-button’

string,component

-

span

控件占用的列宽，默认占用 1 列，最多 4 列 (独占一行)

number

1

defaultVal

默认值

-

-

bind

渲染时组件会调用 v-bind 指定设置该配置更新元素的属性(继承第三方组件属性)

object，function

无

eventHandle

配置组件事件，与写组件时change 等同理

object

本身值，当前formData数据

3. 事件（events）

事件名

说明

返回值

handleEvent

筛选器数据发生变化时触发

event标识, val：输入值,form:整个查询条件数据

submit

点击筛选器查询按钮时触发

form:整个查询条件数据

reset

点击筛选器重置按钮时触发

-

getCheckList

下拉动态添加条件（isDropDownSelectMore:true生效）

返回选中的条件项

4、Slots

插槽名

说明

querybar

按钮操作插槽（位置基于重置后面）

五、具体代码 

<template>
  <el-form
    id="t_query_condition"
    v-bind="$attrs"
    :label-width="labelWidth"
    :form="state.form"
    size="default"
    class="t-query-condition"
    :style="{
      'grid-template-areas': gridAreas,
      'grid-template-columns': `repeat(${colLength}, minmax(220px, ${
        100 / colLength
      }%))`,
    }"
    @submit.prevent
  >
    <el-form-item
      v-for="(opt, i) in cOpts"
      :key="i"
      :label="opt.label"
      :label-width="opt.labelWidth"
      v-bind="$attrs"
      :style="{ gridArea: i }"
      :class="[opt.className, { render_label: opt.labelRender }]"
    >
      <!-- 自定义label -->
      <template #label v-if="opt.labelRender">
        <render-comp :form="state.form" :render="opt.labelRender" />
      </template>
      <!-- 自定义输入框插槽 -->
      <template v-if="opt.slotName">
        <slot :name="opt.slotName" :param="state.form"></slot>
      </template>
      <component
        v-if="!opt.slotName && opt.comp.includes('date')"
        :is="opt.comp"
        v-bind="
          typeof opt.bind == 'function'
            ? opt.bind(state.form)
            : { clearable: true, filterable: true, ...$attrs, ...opt.bind }
        "
        :placeholder="opt.placeholder || getPlaceholder(opt)"
        @change="handleEvent(opt.event, state.form[opt.dataIndex])"
        v-model="state.form[opt.dataIndex]"
      />
      <component
        v-if="!opt.slotName && opt.comp.includes('tree-select')"
        :is="opt.comp"
        v-bind="
          typeof opt.bind == 'function'
            ? opt.bind(state.form)
            : { clearable: true, filterable: true, ...$attrs, ...opt.bind }
        "
        :placeholder="opt.placeholder || getPlaceholder(opt)"
        @change="handleEvent(opt.event, state.form[opt.dataIndex])"
        v-model="state.form[opt.dataIndex]"
      />
      <component
        v-if="
          !opt.slotName &&
          !opt.comp.includes('date') &&
          !opt.comp.includes('tree-select')
        "
        :is="opt.comp"
        v-bind="
          typeof opt.bind == 'function'
            ? opt.bind(state.form)
            : { clearable: true, filterable: true, ...$attrs, ...opt.bind }
        "
        :placeholder="opt.placeholder || getPlaceholder(opt)"
        @change="handleEvent(opt.event, state.form[opt.dataIndex])"
        v-on="cEvent(opt)"
        v-model="state.form[opt.dataIndex]"
      >
        <component
          :is="compChildName(opt)"
          v-for="(value, key, index) in selectListType(opt)"
          :key="index"
          :disabled="value.disabled"
          :label="compChildLabel(opt, value)"
          :value="compChildValue(opt, value, key)"
          >{{ compChildShowLabel(opt, value) }}</component
        >
      </component>
    </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
        class="btn_check"
        @click="checkHandle"
        v-bind="queryAttrs"
        :loading="loading"
        >查询</el-button
      >
      <el-button
        v-if="reset"
        class="btn_reset"
        v-bind="resetAttrs"
        @click="resetHandle"
        >重置</el-button
      >
      <slot name="querybar"></slot>
      <el-button
        v-if="originCellLength > colLength && isShowOpen"
        @click="open = !open"
        link
      >
        {{ open ? '收起' : '展开' }}
        <el-icon v-if="open">
          <ArrowUp />
        </el-icon>
        <el-icon v-else>
          <ArrowDown />
        </el-icon>
      </el-button>
    </el-form-item>
  </el-form>
</template>

六、组件地址

gitHub组件地址

gitee码云组件地址

vue3+ts基于Element-plus再次封装基础组件文档

七、相关文章

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

vue+element-ui的列表查询条件/筛选条件组件二次封装