搜索框的顯示與隱藏(展開與收起)

效果如下

?直接上代碼

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
英文地址,請注明出處:http://en.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;就能…