搜索框的显示与隐藏(展开与收起)

效果如下

 直接上代码

v-if="showAll || 0 < 3" 的意思是:如果 showAll 为 true,或者 0 小于 3,这个表单项就会显示。

	<el-form :inline="true" class="demo-form-inline" size="default" label-width="100px"><el-form-item label="平台类型:" v-if="showAll || 0 < 3"><el-select v-model="pageForm.platform_id" placeholder="请选择平台类型"><el-option v-for="item in platformData" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item><el-form-item label="席位ID:" v-if="showAll || 1 < 3"><el-input v-model="pageForm.seat_id" placeholder="请输入席位ID" clearable /></el-form-item><el-form-item label="进粉时间:" v-if="showAll || 2 < 3"><el-date-pickerv-model="dateRange"size="default"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":format="'YYYY-MM-DD'":value-format="'YYYY-MM-DD'"placeholder="选择日期范围"/></el-form-item><el-form-item label="状态:" v-if="showAll"><el-select v-model="delete_status" :multiple="true" clearable placeholder="请选择状态"><el-option label="待清除" :value="1" /><el-option label="已清除" :value="2" /></el-select></el-form-item><el-form-item label="所属平台账号:" v-if="showAll"><el-input v-model="pageForm.account_user_id" placeholder="请输入所属账号UserId" clearable /></el-form-item><div style="margin-left: 100px"><el-button style="background-color: #f4f4f5" size="default" @click="getRefresh">重置</el-button><el-button size="default" type="primary" @click="getList">查询</el-button><span style="color: #999999; cursor: pointer; margin-left: 10px" @click="showAll = !showAll">{{ showAll ? '收起' : '展开' }}<el-icon><component :is="showAll ? 'ArrowUp' : 'ArrowDown'" /></el-icon></span></div></el-form>

样式我调了下输入框的长度

.demo-form-inline .el-input {--el-input-width: 244px;
}.demo-form-inline .el-select {--el-select-width: 244px;
}

 

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

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

相关文章

01 启动流程实例

前言本文基于 Activiti 7.0.0.GA 源码&#xff0c;研究 Activiti 如何启动一个流程实例。审批流程图如下图&#xff0c;在此流程图中&#xff0c;存在两个UserTask节点&#xff0c;第一个节点是主管审批&#xff0c;第二个节点是产品经理审批&#xff0c;两个节点中间有一个排他…

LeetCode--47.全排列 II

解题思路&#xff1a;1.获取信息&#xff1a;给定一个可包含重复数字的序列&#xff0c;按任意顺序返回所有不重复的全排列提示信息&#xff1a;1 < nums.length < 8-10 < nums[i] < 102.分析题目&#xff1a;相较于46题&#xff0c;它多限制了一个条件&#xff0c…

vue3 服务端渲染时请求接口没有等到数据,但是客户端渲染是请求接口又可以得到数据

原因是: 服务端请求 后端接收到 请求 ‘Content-Type’: ‘application/x-www-form-urlencoded; charsetUTF-8’ 直接返回错误的code 200000 增加 data: {} 服务端请求 后端接收到 请求 ‘Content-Type’: ‘application/json; charsetUTF-8’ 服务端请求就可以得到数据 expo…

Linux 文件操作命令大全:从入门到精通的实用指南

Linux 文件操作命令大全&#xff1a;从入门到精通的实用指南 在 Linux 系统中&#xff0c;文件操作是日常工作的核心内容之一。无论是开发者、运维工程师还是 Linux 爱好者&#xff0c;掌握常用的文件操作命令都能极大提升工作效率。本文将详细介绍 Linux 系统中最常用的文件操…

Linux开发利器:探秘开源,构建高效——基础开发工具指南(上)【包管理器/Vim】

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…

基于迁移学习的培养基配方开发方法

本文为学习笔记&#xff0c;原文专利&#xff1a; 中国专利公布公告 然后输入 202110622279.7 概览 一、问题背景 传统培养基开发痛点&#xff1a; 数据依赖&#xff1a;需大量细胞实验&#xff08;1000配方&#xff09;训练专用模型 迁移性差&#xff1a;A细胞模型无法直接…

Web3.0与元宇宙:重构数字文明的技术范式与社会变革

一、技术融合&#xff1a;Web3.0与元宇宙的底层架构互补1.1 区块链与智能合约&#xff1a;构建信任基石去中心化信任机制&#xff1a;Web3.0的区块链技术为元宇宙提供去中心化信任框架&#xff0c;虚拟资产&#xff08;如土地、道具&#xff09;通过NFT&#xff08;非同质化代币…

Java: OracleHelper

/*** encoding: utf-8* 版权所有 2025 ©涂聚文有限公司 * 许可信息查看&#xff1a;言語成了邀功盡責的功臣&#xff0c;還需要行爲每日來值班嗎* 描述&#xff1a; https://www.oracle.com/database/technologies/appdev/jdbc-downloads.html ojdbc11* Author : geovi…

OSPFv3-一二类LSA

文章目录OSPFv3 LSA类型Router LSANetwork LSA&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Datacom专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年07月12日20点01分 OSPFv3 LSA类型 Router LSA 不再包含地址信息&#xff0c;使能 OS…

HugeGraph 【图数据库】JAVA调用SDK

1.引入依赖<dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>28.0-jre</version> </dependency><dependency><groupId>com.squareup.okhttp3</groupId><artifac…

软考中级【网络工程师】第6版教材 第2章 数据通信基础(中)

考点分析&#xff1a;重要程度&#xff1a;⭐⭐⭐&#xff0c;本章可能是全书最难的章节&#xff0c;偏理论&#xff0c;公式多除了传输介质&#xff0c;其他知识点只考选择题&#xff0c;考试一般占3 ~ 5分高频考点&#xff1a;PCM、奈奎斯特定理、曼彻斯特编码&#xff1b;难…

单片机(STM32-中断)

一、中断基础知识 1.概念 中断&#xff08;Interrupt&#xff09;是一种特殊的事件处理机制。当CPU正在执行主程序时&#xff0c;如果出现了某些紧急或重要的事件&#xff08;如外设请求、定时器溢出等&#xff09;&#xff0c;可以暂时中止当前的程序&#xff0c;转而去处理…

gitlab-ci.yml

.gitlab-ci.yml 文件的位置 该文件应放置在 GitLab 项目的代码仓库的根目录 下&#xff0c;具体说明如下&#xff1a;存储库根目录 .gitlab-ci.yml 是 GitLab 持续集成&#xff08;CI&#xff09;的配置文件&#xff0c;需直接放在项目的代码仓库的根目录&#xff08;与 .git 目…

使用JS编写一个购物车界面

使用JS编写一个购物车界面 今天我们来剖析一个精心设计的家具商店购物车页面&#xff0c;这个页面不仅美观大方&#xff0c;还具备丰富的交互功能。让我们一步步拆解它的设计理念和技术实现&#xff01; 页面展示 页面整体结构 这个购物车页面采用了经典的电商布局模式&…

零信任安全架构:如何在云环境中重构网络边界?

一、云原生时代&#xff1a;传统防火墙为何轰然倒塌&#xff1f; 当业务碎片化散落在AWS、阿里云、私有IDC&#xff0c;当员工随手在咖啡厅WiFi连接生产数据库&#xff0c;“内网可信”的基石瞬间崩塌&#xff0c;传统防火墙彻底沦为马奇诺防线&#xff1a; 边界消亡&#xff1…

css实现烧香效果

效果&#xff1a;代码&#xff1a;<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>动态香烛效果&…

硬件产品的技术资料管控是确保研发可追溯、生产可复制、质量可控制的核心环节。

硬件产品的技术资料管控是确保研发可追溯、生产可复制、质量可控制的核心环节。以下针对BOM单、PCB文件、程序代码、原理图四大核心要素&#xff0c;结合行业实践提出管控方向划分及优化策略&#xff1a;&#x1f4cb; 一、硬件BOM单的精细化管控方向BOM单是硬件生产的“配方表…

Uniswap V2/V3/V4简短说明

Uniswap 是以太坊上最知名的去中心化交易所&#xff08;DEX&#xff09;&#xff0c;它通过不同的版本&#xff08;V2、V3、V4&#xff09;不断改进&#xff0c;变得更高效、更灵活。以下是用通俗易懂的方式介绍它们之间的异同&#xff1a; Uniswap V2&#xff1a;基础版&#…

C++面向对象创建打印算术表达式树

C面向对象&#xff0c;实现算术表达式树的创建和打印的案例&#xff0c;来源于《C沉思录》第八章&#xff0c;涉及数据抽象、继承、多态&#xff08;动态绑定&#xff09;、句柄&#xff0c;其中句柄的使用是核心&#xff0c;关于句柄的较为简单的文章链接点击这里&#xff0c;…

力扣每日一题--2025.7.16

&#x1f4da; 力扣每日一题–2025.7.16 &#x1f4da; 3201. 找出有效子序列的最大长度 I&#xff08;中等&#xff09; 今天我们要解决的是力扣上的第 3201 题——找出有效子序列的最大长度 I。这道题虽然标记为中等难度&#xff0c;但只要掌握了正确的思路&#xff0c;就能…