搜索功能(el-form): 展开/收起

最新推荐文章于 2025-06-17 17:11:46 发布

开发那点事儿~

最新推荐文章于 2025-06-17 17:11:46 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端开发文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/m0_58293192/article/details/128393711

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

javascript

34 篇文章

订阅专栏

本文介绍如何在搜索条件复杂时，设计一个可收起/展开的搜索栏，包括时间范围选择、证照类型筛选等，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:

当搜索条件过多,需要多行显示,并且可以收起/展开

// 展开

// 收起

// 左侧菜单收起

代码:

// search-coloct ==> 你可以定义一个全局的样式
// 主要通过 searchCol 进行判断是否收起
<div :class="{'search-coloct':!searchCol}">
                            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
                                <el-form-item label="时间" style="width: 308px">
                                    <el-date-picker
                                        v-model="dateRange"
                                        value-format="YYYY-MM-DD"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="证照类型名称" prop="dictName">
                                    <el-input
                                        v-model="queryParams.dictName"
                                        placeholder="请输入证照类型名称"
                                        clearable
                                        style="width: 240px"
                                        @keyup.enter="handleQuery"
                                    />
                                </el-form-item>
                                <el-form-item label="100类免证明" prop="status">
                                    <el-select
                                        v-model="queryParams.status"
                                        placeholder="请选择"
                                        clearable
                                        style="width: 240px"
                                    >
                                        <el-option
                                            v-for="dict in sys_normal_disable"
                                            :key="dict.value"
                                            :label="dict.label"
                                            :value="dict.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="服务方式" prop="prove">
                                    <el-select
                                        v-model="queryParams.prove"
                                        placeholder="请选择"
                                        clearable
                                        style="width: 240px"
                                    >
                                        <el-option
                                            v-for="dict in sys_normal_disable"
                                            :key="dict.value"
                                            :label="dict.label"
                                            :value="dict.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="跨域" prop="crossDomain">
                                    <el-select
                                        v-model="queryParams.crossDomain"
                                        placeholder="请选择"
                                        clearable
                                        style="width: 240px"
                                    >
                                        <el-option
                                            v-for="dict in sys_normal_disable"
                                            :key="dict.value"
                                            :label="dict.label"
                                            :value="dict.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
<div style="display: flex;justify-content: center;">
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>

                            <el-button type="text" size="small" @click="closeSearch">
                                {{searchCol?'收起':'展开'}}
                                <svg-icon :class="{'is-active':searchCol}" icon-class="down"
                                          class="icon"/>
                            </el-button>
                        </div>


<script setup>

const searchCol = ref(true)
    
function offsetHeightNow() {
    setTimeout(() => {
        let height = proxy.$refs.element.offsetHeight;
        // 这里的判断是,当左边的菜单收起来的时候,右边的搜索框的宽度会变宽,就不需要收起了,可以直接显示
        if (document.body.clientWidth < 1440) {
            rightBottomDiv.value = height - 110
        } else {
            rightBottomDiv.value = height - 130
        }
    }, 100);
};

onMounted(() => {
    offsetHeightNow()

    window.addEventListener('resize', () => {
        rightBottomDiv.value = 0
        offsetHeightNow()
    })
});

// 展开/收起
function closeSearch() {
    rightBottomDiv.value = 0
    searchCol.value = !searchCol.value
    offsetHeightNow()
}

</script>

// 样式

.search-coloct {
    height: 48px;
    overflow: hidden;
  }