When there are many query fields, you can add ordinary query and advanced query

  When there are many query fields, you can add ordinary query and advanced query

One way is to click the advanced query pop-up box to enter search , The second is to expand more query contents

There is a preference for the second , Because the operation is simpler ,

 

 

Key code （vue Realization ）

What to hide

<template v-if="expandMore">
 What to hide 
</template>

Advanced query button  

  <el-button :icon="expandMore ?'el-icon-arrow-up':'el-icon-arrow-down'" type="text"
                   @click="expandMore =!expandMore">{
   { expandMore ? ' Put away advanced search ' : ' Expand advanced search ' }}
        </el-button>

Definition expandMore Variable

const expandMore = ref(false);

Specific reference

Step by step VUE+Element Front end application development (29）--- Interface design of advanced query criteria - Wu Huacong - Blog Garden (cnblogs.com)