elementui折叠面板默认展开,element table 展开行

　　本文主要介绍vue element-ul实现展开和折叠功能的示例代码。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

　　实现效果如下：

　　需求：

　　因为后台搜索选项多，影响页面美观，所以一进来就要隐藏一些搜索词，只留一行。

　　点击【展开搜索】按钮显示全部，点击【折叠搜索】按钮再次折叠该部分，留下一行。

　　需求分析：

　　因为不容易控制行数，因为不同屏幕尺寸显示的一行内容不一样(不考虑移动终端)，所以考虑用显示高度来控制。

　　解决方案：

　　因此，通过控制搜索区域的高度来实现扩展和收缩搜索功能。

　　页面一进来就关闭搜索状态，搜索区域高度控制在120px，多余部分隐藏。

　　当点击以扩展搜索时，将搜索区域的高度调整为“自动”

　　变量：显示所有控件状态

　　代码解析：

　　El-button type= text style= margin-left:10px id= closearchbtn @ click= closearch

　　{{word}}

　　I:showAll？El-icon-向上箭头: El-icon-向下箭头 /i

　　/el-button

　　当showAll为false时，即搜索区域关闭，则按钮文本将更改为“扩展搜索”，图标将更改为el-icon-arrow-down。

　　当showAll为true时，即搜索区域全部展开，按钮文字改为“折叠搜索”，图标向上翻(el-icon-arrow-up)。

　　data(){

　　返回{

　　showAll:真的；//全部展开？

　　}

　　}

　　计算值：{

　　word: function() {

　　if (this.showAll==false) {

　　//处理文本

　　返回“扩展搜索”；

　　}否则{

　　返回“折叠搜索”；

　　}

　　}

　　},

　　mounted()中调用closeSearch函数，页面一进来，即处于折叠状态，this.showAll就设置为false。所以在数据中第一次定义showAll时，它被设置为true。

　　将搜索区域的ID设置为“searchBox”，

　　当showAll为false时，将搜索区域高度设置为120px，否则高度将自动设置。

　　已安装(){

　　/**

　　*收起搜索。

　　*/

　　这个。$nextTick(function() {

　　this . close search()；

　　});

　　},

　　方法：{

　　closeSearch() {

　　this.showAll=！this.showAll

　　var searchBoxHeght=document . getelementbyid( search box )；

　　if (this.showAll==false) {

　　searchboxheght . style . height=60 px ；

　　}否则{

　　searchboxheght . style . height= auto ；

　　}

　　}

　　}

　　不要忘记CSS中的关键设置。

　　#搜索框{

　　溢出：隐藏；

　　}

　　关于vue元素的示例代码——ul的扩展和折叠功能的文章到此为止。请搜索我们以前的文章或继续浏览下面的相关文章，了解更多关于vue element-ul的扩展和折叠的信息。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。