需求:
当搜索条件过多,需要多行显示,并且可以收起/展开
// 展开
// 收起
// 左侧菜单收起
代码:
// 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;
}