页面,根据控制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; } }) } }
效果图