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

news2024/11/17 1:37:37

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、展示

不点

点击后

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1323210.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL 入门指南:从零开始学习 SQL

当今时代&#xff0c;数据已经成为了我们生活中不可或缺的一部分。无论是企业的经营决策&#xff0c;还是个人的日常消费习惯&#xff0c;都需要通过对数据的收集、分析和应用来实现更好的结果。 而关系型数据库系统&#xff0c;作为最常见的数据存储和管理方式&#xff0c;SQ…

大数据讲课笔记5.1 初探MapReduce

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;MapReduce核心思想&#xff08;二&#xff09;MapReduce编程模型&#xff08;三&#xff09;MapReduce编程实例——词频统计思路1、Map阶段&#xff08;映射阶段&#xff09;2、Reduce阶段&#xff08…

webpack知识点总结(基础应用篇)

一、为什么需要webpack 1.为什么使用webpack ①传统的书写方式&#xff0c;加载太多脚本会导致网络瓶颈&#xff0c;如不小心改变JavaScript文件加载顺序&#xff0c;项目会崩溃&#xff0c;还会导致作用域问题、js文件太大无法做到按需加载、可读性和可维护性太低的问题。 ②…

AWS Linux安装桌面并远程访问

文章目录 小结问题及解决参考 小结 在AWS Linux安装了桌面并进行远程访问。 问题及解决 需要使用过程桌面访问AWS Linux&#xff0c;这里在AWS服务器安装并使用Amazon Linux 2 MATE desktop。 检查OS版本&#xff1a; [ec2-userip-10-0-3-241 ~]$ grep PRETTY_NAME /etc/o…

lv12 linux 内核移植 10

目录 1 内核概述 1.1 内核与操作系统 1.2 Linux层次结构 1.3 Linux内核特点 2 Linux内核源码结构 2.1 Linux内核源码获取 2.2 源码结构 3 Linux内核移植 3.1 在 Linux 官网下载 Linux 内核源码&#xff08;这里我们下载 linux-3.14.tar.xz&#xff09; 3.2 拷贝内核源…

景区气象站:旅游体验的新升级

随着科技的发展和人们生活水平的提高&#xff0c;越来越多的人选择在节假日或周末外出旅游&#xff0c;感受大自然的美好。然而&#xff0c;在享受大自然的同时&#xff0c;天气因素成为了影响旅游体验的关键因素之一。为了更好地服务游客&#xff0c;许多景区开始引入气象站&a…

多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现KOA-CNN-B…

ArcGIS Pro中去除黑边方法汇总

在有些时候&#xff08;比如镶嵌栅格后&#xff09;&#xff0c;我们获取到的影像数据可能会有黑边&#xff0c;这里为大家汇总一下在ArcGIS Pro中去除黑边的方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图中下载的影像数据&#xff0c;除了…

开发知识点-09Rust

Rust Rust 语言通常用于编写系统级软件、网络服务器和高性能应用程序&#xff0c;它具有以下特点&#xff1a;1. 高性能和内存安全&#xff1a;Rust 在保证高性能的同时&#xff0c;利用其所有权模型和借用检查器等特性确保内存安全&#xff0c;避免了 C/C 等语言的内存错误和崩…

再看参数校验

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 写一个接口&#xff0c…

redis基本用法学习(字符串类型基本操作)

字符串类型是redis支持的最简单的数据类型&#xff0c;同时最简单的键值对类型也是key和value都是单个字符串&#xff0c;本质上就是字符串之间的相互映射&#xff0c;redis官网String类型简介页面提到可以用于缓存HTML片段或页面内容。   redis支持设置/获取单个键值对&…

行为型设计模式(一)模版方法模式 迭代器模式

模板方法模式 Template 1、什么是模版方法模式 模版方法模式定义了一个算法的骨架&#xff0c;它将其中一些步骤的实现推迟到子类里面&#xff0c;使得子类可以在不改变算法结构的情况下重新定义算法中的某些步骤。 2、为什么使用模版方法模式 封装不变部分&#xff1a;模版…

2024 年 8 个顶级开源 LLM(大语言模型)

如果没有所谓的大型语言模型&#xff08;LLM&#xff09;&#xff0c;当前的生成式人工智能革命就不可能实现。LLM 基于 transformers&#xff08;一种强大的神经架构&#xff09;是用于建模和处理人类语言的 AI 系统。它们之所以被称为“大”&#xff0c;是因为它们有数亿甚至…

Axure的案例演示

增删改查&#xff1a; 在中继器里面展示照片

第三讲GNSS相关时间系统和转换 第四讲观测值的产生和分类 | GNSS(RTK)课程学习笔记day2

说明&#xff1a;以下笔记来自计算机视觉life吴桐老师课程&#xff1a;从零掌握GNSS、RTK定位[链接]&#xff0c;从零掌握RTKLIB[链接]。非原创&#xff01;且笔记仅供自身与大家学习使用&#xff0c;无利益目的。 第三讲 GNSS相关时间系统和转换 GPS卫星的位置在时间过程中是…

SpringCloud源码探析(十二)-基于SpringBoot开发自定义中间件

1.概述 中间件是一种介于操作系统和应用软件之间&#xff0c;为应用软件提供服务功能的软件&#xff0c;按功能划分有消息中间件&#xff08;Kafka、RocketMQ&#xff09;、通信中间件&#xff08;RPC通信中间件&#xff0c;dubbo等&#xff09;&#xff0c;应用服务器等。中间…

等保测评主要保护哪些方面的安全?

等保测评是经公安部认证的具有资质的测评机构&#xff0c;依据国家信息安全等级保护规范规定&#xff0c;受有关单位委托&#xff0c;按照有关管理规范和技术标准&#xff0c;对信息系统安全等级保护状况进行检测评估的活动。那么企业做等保“保”的是什么呢&#xff1f; 等保主…

《空气质量持续改善行动计划》发布,汉威科技助力蓝天保卫战

近日&#xff0c;国务院印发《空气质量持续改善行动计划》&#xff0c;这是继2013年“大气十条”之后的第三个国家层面的保卫蓝天行动计划。 计划要求协同推进降碳、减污、扩绿、增长&#xff0c;以改善空气质量为核心&#xff0c;以减少重污染天气和解决人民群众身边的突出大…

深入理解 HTTP 和 HTTPS:提升你的网站安全性(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

Android Studio问题解决:Gradle Download 下载超时 Connect reset

文章目录 一、遇到问题二、解决办法 一、遇到问题 Gradle Download下载超时Sync了很多次&#xff0c;一直失败 二、解决办法 手动通过gradle网站下载 https://gradle.org/releases/可能也会出现超时&#xff0c;最好开个VPN软件会比较快。 下载好的软件&#xff0c;放到本机的…