elementUI点击按钮实现更多条件的隐藏与显示

按钮实现更多条件的隐藏与显示"/>

elementUI点击按钮实现更多条件的隐藏与显示

需要实现的业务

点击更多条件这个按钮，显示更多搜索条件，再次点击将隐藏

实现思路：

• 给按钮绑定点击事件
• 给点击更多条件显示出的表单增添v-show属性
• 每次点击更改属性显示与否

vue template中代码

 		<el-formv-show="searchVisible == -1":inline="true"class="invisibleForm"><el-form-item><el-input placeholder="项目编号"></el-input></el-form-item><el-form-item><el-input placeholder="项目名称"></el-input></el-form-item><el-form-item><el-input placeholder="合同自编号"></el-input></el-form-item><el-form-item><el-input placeholder="合同名称"></el-input></el-form-item><el-form-item><el-input placeholder="合同金额区间"></el-input></el-form-item></el-form>

scripts代码

methods: {showForm() {if (this.searchVisible == 1) {this.Height = 120 + "px";this.searchVisible = -1;} else {this.Height = 60 + "px";this.searchVisible = 1;}},

需要实现定义好相关data

  data() {return {searchVisible: 1,Height: 60 + "px"}}