Vue+Element-UI下的条件筛选组件封装 —— 自定义实现展开/收起切换

2023-10-17 21:38:43

如何封装 Element-UI 查询条件组件，实现收起和展开功能

随着项目规模的不断扩大，业务需求也日益复杂，需要在页面中提供丰富的查询条件，以方便用户快速筛选出所需数据。然而，当查询条件过多时，会导致页面布局混乱，影响用户体验。因此，本文将详细介绍如何在 Vue 项目中封装 Element-UI 的列表查询条件/筛选条件组件，使其能够在查询条件较多时实现收起和展开功能，从而优化页面布局，提升用户体验。

组件功能

定制开发的 Vue+Element-UI 查询条件/筛选条件组件具有以下功能：

条件筛选组件封装： 将查询条件封装成组件，便于在不同页面复用。
展开/收起切换： 当查询条件较多时，支持收起和展开功能，以优化页面布局。
丰富参数配置： 提供丰富的参数配置，包括表单配置、是否显示加载中状态等，以满足不同业务需求。
代码示例： 提供详细的代码示例，指导开发者快速上手使用。

效果图

参数配置

配置参数 (Attributes)

参数	说明	类型	默认值
opts	接收筛选器组件配置	formOpt{}	无
loading	是否显示加载中状态	Boolean	false

表单配置 (opts)

参数	说明	类型	默认值
form	表单配置	formOpt	无
submitText	提交按钮文案	String	"查询"
resetText	重置按钮文案	String	"重置"
collapseText	收起按钮文案	String	"收起"
expandText	展开按钮文案	String	"展开"

代码示例

导入组件

import FilterForm from '@/components/FilterForm.vue';

使用组件

<template>
  <FilterForm opts="{ form: formOpt }" @submit="onSubmit" @reset="onReset" />
</template>

<script>
import FilterForm from '@/components/FilterForm.vue';

export default {
  components: { FilterForm },
  data() {
    return {
      formOpt: {
        // 表单项配置
      },
    };
  },
  methods: {
    onSubmit() {
      // 提交表单
    },
    onReset() {
      // 重置表单
    },
  },
};
</script>