實現效果如下：

需求：

由於後臺搜尋選項有很多，影響頁面美觀，所以一進來要隱藏一部分搜尋項，只保留1行，

點選【展開搜尋】按鈕的時候才顯示全部，點選【收起搜尋】按鈕又收起部分，保留1行。

需求分析：

由於不太好控制行數，因為不同螢幕尺寸展示的1行的內容並不相同（不考慮移動端），所以考慮用顯示高度來控制。

解決思路：

所以這裡通過控制搜尋區域的高度來實現展開和收起搜尋功能。

頁面一進來是收起搜尋狀態，控制搜尋區域的高度為120px,超出部分隱藏。

點選展開搜尋的時候，調整搜尋區域的高度為”auto"

定義變數：showAll控制狀態

程式碼解析：

 <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>

當showAll為false的時候，即搜尋區域處於收起狀態，此時將按鈕文字變為“展開搜尋”，圖示變為向下（el-icon-arrow-down)

當showAll為ture的時候，即搜尋區域全部展開了，將按鈕文字變成“收起搜尋”，圖示變成向上（el-icon-arrow-up)

data(){
  return{
   showAll:true;//是否展開全部
 
  }
}
computed: {
  word: function() {
   if (this.showAll == false) {
    //對文字進行處理
    return "展開搜尋";
   } else {
    return "收起搜尋";
   }
  }
 },

mounted()裡呼叫closeSearch函式，頁面一進來將this.showAll設為false,即處於收起狀態。所以data裡最初給showAll定義的時候設為true.

給搜尋區域的ID設為“searchBox” ，

當showAll為false的時候，設定搜尋區域高度為120px,否則高度自動。

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";
   }
  }
 }

CSS中關鍵的設定不要忘記。

#searchBox {
 overflow: hidden;
}

到此這篇關於vue element-ul實現展開和收起功能的例項程式碼的文章就介紹到這了,更多相關vue element-ul展開和收起內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！