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

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

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

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

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

点击收起后：

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

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

                    
                        
                            
                                
                            

                            
                                
                            
                            
                                
                            
                        
                        
                    
                  
                

                {{showOrHideText}}
                

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的环境下，一些元素的获取和绑定方式不太一样，希望能给需要的朋友提供帮助！

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