vue element-ul实现展开和收起功能的实例代码

 <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch">
     {{word}}
     <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
    </el-button>

data(){
  return{
   showAll:true;//是否展开全部
 
  }
}
computed: {
  word: function() {
   if (this.showAll == false) {
    //对文字进行处理
    return "展开搜索";
   } else {
    return "收起搜索";
   }
  }
 },

mounted() {
  /**
   * 收起搜索
   */
  this.$nextTick(function() {
   this.closeSearch();
  });
 },
 methods:{
  closeSearch() {
   this.showAll = !this.showAll;
   var searchBoxHeght = document.getElementById("searchBox");
   if (this.showAll == false) {
    searchBoxHeght.style.height = 60 + "px";
   } else {
    searchBoxHeght.style.height = "auto";
   }
  }
 }

#searchBox {
 overflow: hidden;
}

    :style="{
                height: showMoreSearch
                    ? `${searchboxHeight - searchboxOtherHeight}px`
                    : `${searchboxDefaultHeight}px`
            }">

        <el-button
                class="more-arrow"
                type="text"
                title="更多查询条件"
                @click="toggleSearch(1)">
                {{ searchTitle }}
                <i class="el-icon-arrow-down more-arrow"></i>
            </el-button>

   showMore: false, // 是否下拉显示更多
            searchTitle: "显示全部"

   // 显示更多（rows为下拉的行数，根据下拉行数计算高度）
        toggleSearch (rows = 1) {
            this.showMoreSearch = !this.showMoreSearch;
            this.searchTitle = this.showMoreSearch ? "收起" : "显示全部";
            this.searchboxHeight = this.showMoreSearch ? rows * 64 + 200 : 200;
        },