表格搜索栏查询条件展开和合并

页面,根据控制searchButtonStatus的值false 和true来对应显示展开和合并
<el-button type="text" @click="searchFold">{{searchButton}}<i :class="'el-icon-arrow-'+searchButtonIcon"></i></el-button>

searchFold(){
  this.searchButtonStatus = !this.searchButtonStatus;
  if(this.searchButtonStatus)
  {
    //文字和图标的显示
    this.searchButton = '合并'
    this.searchButtonIcon = 'up'
     //修改搜索栏中条件显示
    this.formLabel.map(item =>{
      if(item.display === 'none'){
        item.display = 'block',
        item.labelShow = false;
      }
    })
  }else{
    //文字和图标的显示
    this.searchButton = '展开'
    this.searchButtonIcon = 'down'
    //修改搜索栏中条件隐藏
    this.formLabel.map(item =>{
      if(item.display === 'block'){
        item.display = 'none',
        item.labelShow = true;
      }
    })
  }
}

效果图