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

不点

点击后

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于grpc从零开始搭建一个准生产分布式应用(7) - 01 - 附:GRPC拦截器源码

开始前必读&#xff1a;​​基于grpc从零开始搭建一个准生产分布式应用(0) - quickStart​​ 一、源码目录结构 二、GRPC拦截器源码 2.1、com.zd.baseframework.core.core.common.interceptor package com.zd.baseframework.core.core.common.interceptor;import com.zd.ba…

element plus 表格el-table行多选单选

1 行多选-点击checkbox 添加一个 el-table-column&#xff0c;设 type 属性为 selection 即可 <template><div class"box"><el-table :data"tableData" selection-change"handleSelectionChange"><el-table-column type&…

docker小白第六天

docker小白第六天 容器数据卷是什么 首先&#xff0c;容器卷有个坑&#xff1a;容器卷需要加入privilegedtrue&#xff0c;如下图所示&#xff0c;是为了解决permission denied的问题。其中“挂载”的意思是相当于一个硬盘插到主机上。使用该命令。是扩大容器的权限解决挂载目…

路由器设置代理IP教程,http代理怎么固定IP地址?

路由器设置代理IP教程 一、确定代理IP地址 首先&#xff0c;你需要确定你要使用的代理IP地址。你可以从代理服务提供商处获取代理IP地址和端口号。 二、登录路由器管理界面 在浏览器中输入路由器的IP地址&#xff0c;输入账号和密码&#xff0c;进入路由器的管理界面。 三、设置…

高级桌面编程(二)

一、前言 文章的续作前文是&#xff1a; 高级桌面编程&#xff08;一&#xff09;-CSDN博客https://blog.csdn.net/qq_71897293/article/details/135072204?spm1001.2014.3001.5502 二、自定义控件 1创建自定义控件&#xff0c;如下图所示&#xff1a; 2 在创建的页面可以…

架构设计系列之前端架构和后端架构的区别和联系

前端架构和后端架构都是软件系统中最关键的架构层&#xff0c;负责处理不同方面的任务和逻辑&#xff0c;两者之间是存在一些区别和联系的&#xff0c;我会从以下几个方面来阐述&#xff1a; 一、定位和职责 前端架构 主要关注用户界面和用户体验&#xff0c;负责处理用户与…

10000字讲解TCP协议(确认应答,超时重传,三次握手,四次挥手等等众多机制)以及UDP协议(UDP报文,校验和)

文章目录 UDP协议&#xff1f;什么是校验和&#xff1f;基于UDP的应用层协议(了解) TCP协议确认应答(可靠性机制)超时重传(可靠性机制)连接管理(可靠性机制)三次握手(重点)四次挥手(重点) 三次握手和四次挥手时客户端和服务器的状态滑动窗口(效率机制)流量控制(效率机制)窗口探…

大型语言模型:SBERT — Sentence-BERT

slavahead 一、介绍 Transformer 在 NLP 方面取得了进化进步&#xff0c;这已经不是什么秘密了。基于转换器&#xff0c;许多其他机器学习模型已经发展起来。其中之一是BERT&#xff0c;它主要由几个堆叠的变压器编码器组成。除了用于情感分析或问答等一系列不同的问题外&#…

国产ToolLLM的课代表---OpenBMB机构(清华NLP)旗下ToolBench的安装部署与运行(附各种填坑说明)

ToolBench项目可以理解为一个能直接提供训练ToolLLM的平台&#xff0c;该平台同时构建了ToolLLM的一个开源训练指令集。&#xff0c;该项目是OpenBMB机构&#xff08;面壁智能与清华NLP联合成立&#xff09;旗下的一款产品&#xff0c;OpenBMB机构名下还同时拥有另外一款明星产…

一种基于IWR6843雷达的跌倒检测系统的设计和实现(TI文档)

摘要 随着年龄增长&#xff0c;人体各项生理机能退化严重&#xff0c;老年人很容易发生跌倒&#xff0c;导致身体受到严重的伤害。近年来&#xff0c;随着国内人口老龄化越来越严重&#xff0c;主要针对老年人的跌倒检测系统正受到越来越多的关注。和常用的加速度传感器和视觉技…

vue el-date-picker中datetime类型对今天之后的日期包含时分禁用

vue el-date-picker中datetime类型对今天之后的日期包含时分禁用 目前对选择秒那一列未禁用 <template><div><el-date-pickerv-model"deactivateTime"type"datetime"format"yyyy-MM-dd HH:mm:ss"value-format"yyyy-MM-dd HH…

Unity 通过代码将一张大图切成多个小图的方法

在Unity 中要通过代码将一张贴图切割成多张小图&#xff0c;可以使用以下方法&#xff1a; /// <summary>/// 把一张图片切割成多张使用/// </summary>/// <param name"texture">原图</param>/// <param name"rows">切割的行…

SQL进阶理论篇(十三):数据库的查询优化器是什么?

文章目录 简介什么是查询优化器查询优化器的两种优化方式总结参考文献 简介 事务可以让数据库在增删改查的过程中&#xff0c;保证数据的正确性和安全性&#xff0c;而索引可以帮数据库提升数据的查找效率。查询优化器&#xff0c;则是帮助我们获取更高的SQL查询性能。 本节我…

持续集成交付CICD:K8S 自动化完成前端项目应用发布与回滚

目录 一、实验 1.环境 2.GitLab新建项目存放K8S部署文件 3.Jenkins手动测试前端项目CD 流水线代码&#xff08;下载部署文件&#xff09; 4. 将K8S master节点配置为jenkins从节点 5.K8S 手动回滚前端项目版本 6.Jenkins手动测试前端项目CD 流水线代码&#xff08;发布应…

空间转录组 多样本整合分析—stlearn

大家好&#xff0c;今天介绍一款空间转录组整合分析的python软件——stlearn。 如果你还不会安装&#xff0c;可以看下之前的推文&#xff0c;windows系统本地安装stlearn&#xff1a;本地安装jupyterlab&#xff0c;并创建conda小环境——以空间转录组细胞互作之stlearn安装为…

设计模式——0前言目录

1 设计模式介绍 应当站在产品经理的角度来学习设计模式 是软件设计中常见问题的典型解决方案&#xff0c;可用于解决代码中反复出现的设计问题 学习效果一般的原因在于自己没有站在产品经理的角度学习&#xff0c;仅仅是为了学习怎么实现&#xff0c;用什么算法实现。 分类&…

telnet的交互原理(wireshark分析)

telnet的交互原理&#xff08;wireshark篇&#xff09; telnet的协议类型是tcp&#xff0c;他的密钥用的是明文的&#xff0c;容易被捕获&#xff0c;所以后来的windows基本弃用了telnet服务端但依然保留了客户端。 下面是他的交互抓包&#xff1a; 这里面的前三条运用的是tc…

一种基于外观-运动语义表示一致性的视频异常检测框架 论文阅读

A VIDEO ANOMALY DETECTION FRAMEWORK BASED ON APPEARANCE-MOTION SEMANTICS REPRESENTATION CONSISTENCY 论文阅读 ABSTRACT1. INTRODUCTION2. PROPOSED METHOD3. EXPERIMENTAL RESULTS4. CONCLUSION阅读总结&#xff1a; 论文标题&#xff1a;A VIDEO ANOMALY DETECTION FRA…

【工作流Activiti】MyActivit的maven项目

1、Idea新建一个项目MyActivit的maven项目 2、安装插件 在 idea 里面&#xff0c;activiti 的插件叫 actiBPM&#xff0c;在插件库里面把它安装好&#xff0c;重启 idea 就行了。 3、 maven 项目中&#xff0c;并更改 pom.xml。pom 中依赖如下&#xff1a; <?xml version…

IntelliJ IDE 插件开发 | (三)消息通知与事件监听

系列文章 IntelliJ IDE 插件开发 |&#xff08;一&#xff09;快速入门IntelliJ IDE 插件开发 |&#xff08;二&#xff09;UI 界面与数据持久化IntelliJ IDE 插件开发 |&#xff08;三&#xff09;消息通知与事件监听 前言 在前两篇文章中讲解了关于插件开发的基础知识&…