查询字段较多时可以添加普通查询和高级查询两种情况

 查询字段较多时可以添加普通查询和高级查询两种情况

一种方式是点击高级查询弹出框输入搜索，第二种是展开更多查询内容

这里倾向于第二种，因为操作更简单，

 

 

关键代码（vue实现）

要隐藏的内容

<template v-if="expandMore">
要隐藏的内容
</template>

高级查询按钮 

  <el-button :icon="expandMore ?'el-icon-arrow-up':'el-icon-arrow-down'" type="text"
                   @click="expandMore =!expandMore">{
   { expandMore ? '收起高级搜索' : '展开高级搜索' }}
        </el-button>

定义expandMore变量

const expandMore = ref(false);

具体参考

循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计 - 伍华聪 - 博客园 (cnblogs.com)