<collapse class="collapse" @on-change="setName">
                <panel name="1">
                    <span class="sx">顯示篩選:</span>
                    <p slot="content">
                            <date-picker  class="date-picker" :options="options1" v-model="dateModel" placement="bottom" format="yyyy-MM-dd HH:mm" type="datetimerange" 
                            placeholder="請選擇日期" @on-change="dateChange"
                               @on-ok="sure" @on-clear="isEmpty"></date-picker>
                       </p>
                   </panel>
               </collapse>
 

在setName裡面可以寫面板狀態變化觸發的事件:

 setName:function () { 
          if(this.isZ){
            $(".sx").text("關閉篩選");
             this.isZ=false;
             $(".tag").hide();
          }else{
            $(".sx").text("顯示篩選");
            if(this.flag==1){
              $(".tag").show();
            }else{
              $(".tag").hide();
            }
            this.isZ=true;
          }
         },
 

佈局:

(注意:collapse 裡面的內容會受到collapse的設定的寬度所限制,比如我在裡面放置了一些內容老是不能顯示在同一行,因為不是同一時間寫的,所以就忽略了這一點,後來就改了過來)

html:

 <collapse class="collapse" @on-change="setName">
        <panel name="1">
            <span class="sx">顯示篩選:</span>
            <p slot="content">
                    //此處填折疊面板裡面的內容佈局程式碼
               </p>
           </panel>
       </collapse>
 

css:

.collapse{
  float: left;
  border-width: 0px;
  width: 300px;
  margin-left: 200px;
}
.sx {
  font-size: 14px;
}
.ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
  background: #fff;
}
.ivu-collapse-content>.ivu-collapse-content-box{
  margin-left: 50px;
} 

樣式: