VUE+ElementUI模式下,实现菜单的显示与隐藏
最近这个需求是,由于查询条件太多,想将一部分查询条件先隐藏起来,需要时再点击显示按钮进行展示。我们的前端环境是vue+ElementUI的,查阅了官网案例http://element-cn.eleme.io/#/zh-CN/component/collapse只找到了Collapse 折叠面板,由于里面一些组件是写死的,不能进行个性化修改,所以不能满足现在的需求,只能放弃!我...
·
最近这个需求是,由于查询条件太多,想将一部分查询条件先隐藏起来,需要时再点击显示按钮进行展示。
我们的前端环境是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的环境下,一些元素的获取和绑定方式不太一样,希望能给需要的朋友提供帮助!
如果有更好的方法,欢迎大家留言告知,谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)