VUE+ElementUI模式下，实现菜单的显示与隐藏

     最近这个需求是，由于查询条件太多，想将一部分查询条件先隐藏起来，需要时再点击显示按钮进行展示。

我们的前端环境是vue+ElementUI的，查阅了官网案例http://element-cn.eleme.io/#/zh-CN/component/collapse

只找到了Collapse 折叠面板，由于里面一些组件是写死的，不能进行个性化修改，所以不能满足现在的需求，只能放弃！

我们主要想实现的功能就是，如下图：

点击收起后：

就是这么一个简单的功能，在vue+Element的环境下，实现起来有些困难，因为一些原生的js用不了。。。。

最后还是利用了最原始的思路，隐藏和展示div的思想，html代码如下，将要隐藏的内容放在一个div中：

<div id="showOrHide" style="margin-bottom: 0px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="code">
                                <el-input v-model="queryForm.code" placeholder="编码"></el-input>
                            </el-form-item>

                            <el-form-item prop="agent">
                                <el-input v-model="queryForm.agent" placeholder="代理商"></el-input>
                            </el-form-item>
                            <el-form-item prop="pattern">
                                <el-input v-model="queryForm.pattern" placeholder="模式"></el-input>
                            </el-form-item>
                        
                        </el-col>
                    </el-row>
                  
                </div>
<!--给按钮绑定点击事件-->
                <el-button @click="showOrHide()"
                           style="border-color:white;background-color:white;font-size: x-small;color:#50bfff;padding:1px 2px;margin-left: 40%;margin-top: 0px;margin-bottom: 15px"
                           :icon="icon">{{showOrHideText}}
                </el-button>

js代码如下：

$(function () {
//控制隐藏和展示的按钮
    $("#showOrHide").hide();
//原vue中的大DIV
var business = new Vue({
        el: '#business',
        data: {
           
//按钮上的展示文字
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
//图标，可根据自己的需求匹配
            icon: 'el-icon-caret-bottom'},
....此处省略无关代码。。。
 methods: {
//隐藏和展示的控制方法
showOrHide: function () {
                if (business.buttonBoolean) {
                    business.icon = 'el-icon-caret-bottom';
                    business.showOrHideText = "显示更多查询条件";
                    $("#showOrHide").hide();

                    business.buttonBoolean = !business.buttonBoolean;
                } else {
                    $("#showOrHide").show();
                    business.icon = 'el-icon-caret-top';
                    business.showOrHideText = "收起";
                    business.buttonBoolean = !business.buttonBoolean;
                }
            },
}
})
})

以上，就能够实现了，思路上和我们的之前的js是一样的，只是在vue和Element的环境下，一些元素的获取和绑定方式不太一样，希望能给需要的朋友提供帮助！

如果有更好的方法，欢迎大家留言告知，谢谢！