vue学习笔记-折叠效果

目标：实现一个点击按钮就能杯折叠的效果。
具体应用：高级检索，点击按钮折叠对应的检索条件，以达到空间节省的目的。
首先，实现一个折叠效果，即点击按钮后，默认的false 被取反。使用表单form 的原因是省去了很多对齐的单独设置，label-position，label-width 配合使用就能实现以下功能：

20180912234840.png

图中第一列和第二列的label 和input始终是右对齐的。

// label-position. 使表单元素统一对齐, <el-form-item>标签内写自己想要的button 或者其他内容即可，如

<el-form-item label="名称:" prop="name" >
<el-input
v-model="form.unit"
placeholder="请输入名称"
clearable
style="width: 120px;"/>
</el-form-item>

代码片段如下：

 <el-form  

  :label-position="labelPosition"

  :inline="true"

   label-width="80px"  >

  <el-form-item>
    ........
  </el-form-item>  

   <!-- 折叠效果 -->
   <el-form-item>

    <el-button @click="showToggle">

      高级检索

    </el-button>

  </el-form-item>

</el-form>

然后再用同样的方法做一些想要点击高级检索就能被折叠或者隐藏 el-form

然后再用一个 <div v-show="isShow" :inline="true" ></div>标签包裹起来，给isShow返回一个isShow: false,
然后给button 添加点击事件@click="showToggle" ，直接利用取反即可：

showToggle:function(){
this.isShow = !this.isShow
}

这样，点击高级检索，下方默认折叠的部分就被展开了。