Vue+ElementUI前端添加展开收起搜索框按钮

简介: Vue+ElementUI前端添加展开收起搜索框按钮

1、搜索框添加判断 v-if="advanced"

<el-form-item label="创建日期" v-if="advanced">
        <el-date-picker
          v-model="daterangeLedat"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

2、添加展开收起按钮

<el-col :md="6" align="right" style="margin-left: auto;">
<el-form-item>
        <el-button class="filter-item" type="primary" @click="handleQuery">搜索</el-button>
        <el-button class="filter-item" style="margin-left: 8px;" @click="resetQuery">重置</el-button>
        <a @click="toggleAdvanced" style="margin:0 4px 0 8px ;vertical-align: middle;">
        {{ advanced ? '收起' : '展开' }}
        <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </a>
      </el-form-item>
</el-col>

3、向data添加变量

advanced: false,

4、添加事件方法

/** 展开按钮操作 */
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

5、展示

不点

点击后

相关文章
|
5天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
4天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
6天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
6天前
|
JSON JavaScript 前端开发
vue前端运行时出现RangeError: Maximum call stack size exceeded
vue前端运行时出现RangeError: Maximum call stack size exceeded
18 4
|
6天前
|
JavaScript 前端开发
vue前端展示【1】
vue前端展示【1】
9 1
|
6天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
6天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
26 0
|
6天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
4天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
6天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
40 1