基于element ui的收起展开检索条件效果

最近一直在用element ui做后台项目，因为后台项目，通常检索条件过多，都展示出来的话占用页面空间过大，也不美观，所以就仿照ant design来了一波展开/收起的小操作，给大家看一下样品先！

QQ截图20201028093059.png

因为是基于element ui 做的，所以不免的要用到它的栅格布局，这样我们的搜索框能达到一种屏幕上的响应式布局。来吧，废话不多说，先上代码;
其中一些关键点我都在代码里写上了注释，同学们要细心一点看哟！

这里是html布局，具体一行显示几个。我们可以调整每一个属性上:md/:sm的数字。
这里我们看到一个element ui的内置动画，，他给收起和展开带上了一个transition飘柔，过渡起来更柔顺，嘎嘎嘎。

QQ截图20201028093257.png

下面我们来看js代码；

最后呢，我们再来一段css，因为下拉框和日期组件这种，不能撑满el-col划分出来的块，所以需要我们手动来给个百分百宽度的样式，这样看起来更好一些。

最后，呈上代码效果。是不是觉得很简单，快动手试试吧。纸上得来终觉浅，绝知此事要躬行，同学们要上手多多练习啊。前端小白，在线装逼。给我吕某人一个面子，别打脸。

QQ截图20201028095423.png

感觉对您有用的麻烦给个小心心，谢谢！