collapse 可折叠面板的状态改变事件及布局

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

樣式: