el-form rules動態限制

情景描述:
el-form 的ref=“obj” rules 對象obj有a,b,c三個字段,點擊按鈕a,a和b字段必填,點擊按鈕c,c字段必填,如何通過 this.$refs.obj.validate((valid)=>{})去判斷呢

<template><div><!-- 你的表單組件 --><el-form ref="obj" :model="obj" :rules="updatedRules"><!-- 表單字段 --><el-form-item prop="a" label="字段 a"><el-input v-model="obj.a"></el-input></el-form-item><el-form-item prop="b" label="字段 b"><el-input v-model="obj.b"></el-input></el-form-item><el-form-item prop="c" label="字段 c"><el-input v-model="obj.c"></el-input></el-form-item><el-button type="primary" @click="submitFormAB('obj')">Submit</el-button><el-button type="primary" @click="submitFormC('obj')">Submit</el-button></el-form></div>
</template><script>
export default {data(){return {updatedRules:{}}},watch: {updatedRules: {handler(newVal, oldVal) {// 如果需要,可以在這里處理 rules 變化的邏輯console.log('Rules 發生變化:', newVal);},immediate: true // 組件掛載時立即觸發}}methods:{submitFormAB(formData){this.$nextTick(() => {  //這里注意使用了 $nextTick 以便于渲染dom// 動態更新驗證規則后重置表單驗證狀態this.$refs[formData].clearValidate();// 更新完規則后執行驗證--備注一下代碼// this.$refs.obj.validate();});this.updatedRules = {a: [{ required: true, message: '字段 a 必填', trigger: 'blur' }],b: [{ required: true, message: '字段 b 必填', trigger: 'blur' }]};this.$resf[formData].validate((valid)=>{if(valid){//驗證完之后調接口}})},submitFormC(formData){this.$nextTick(() => {// 動態更新驗證規則后重置表單驗證狀態this.$refs[formData].clearValidate();});this.updatedRules = {c: [{ required: true, message: '字段 c 必填', trigger: 'blur' }]};this.$resf[formData].validate((valid)=>{if(valid){//驗證完之后調接口}})},}};
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/41791.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/41791.shtml
英文地址,請注明出處:http://en.pswp.cn/web/41791.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

代碼隨想錄-Day50

1143. 最長公共子序列 給定兩個字符串 text1 和 text2&#xff0c;返回這兩個字符串的最長 公共子序列 的長度。如果不存在 公共子序列 &#xff0c;返回 0 。 一個字符串的 子序列 是指這樣一個新的字符串&#xff1a;它是由原字符串在不改變字符的相對順序的情況下刪除某些…

【Linux】supervisor離線源碼安裝

一、安裝meld wget https://pypi.python.org/packages/45/a0/317c6422b26c12fe0161e936fc35f36552069ba8e6f7ecbd99bbffe32a5f/meld3-1.0.2.tar.gz#md53ccc78cd79cffd63a751ad7684c02c91tar -zxvf meld3-1.0.2.tar.gz cd meld3-1.0.2 python setup.py install二、安裝supervis…

Linux環境中安裝JDK

1.下載安裝包 可以通過訪問oracle官網&#xff1a;Java Downloads | Oracle 中國 下載對應的安裝包。 本文使用的是java8的安裝包&#xff0c;包名為&#xff1a;jdk-8u401-linux-x64.tar.gz 2.上傳安裝包到Linux環境 3.進入/usr目錄下&#xff0c;新建一個java的目錄&#…

Python數據分析-歐洲經濟聚類和主成分分析

一、研究背景 歐洲經濟長期以來是全球經濟體系中的重要組成部分。無論是在全球金融危機后的復蘇過程中&#xff0c;還是在新冠疫情期間&#xff0c;歐洲經濟的表現都對世界經濟產生了深遠的影響。歐洲各國經濟體之間既存在相似性&#xff0c;也存在顯著的差異。這些差異不僅體…

Linux下QT程序啟動失敗問題排查方法

文章目錄 0.問題背景1.程序啟動失敗常見原因2.排查依賴庫問題2.1 依賴庫缺失2.2 依賴庫加載路徑錯誤2.3 依賴庫版本不匹配2.4 QT插件庫缺失2.4.1 QT插件庫缺失2.4.2 插件庫自身的依賴庫缺失 2.5 系統基礎C庫不匹配 3.資源問題3.1 缺少翻譯文件3.2 缺少依賴的資源文件3.3 缺少依…

Unity3D批量修改名稱工具

介紹 該工具用于批量修改某游戲對象的一級子對象名稱&#xff0c;功能包括批量添加前后綴、批量修改公共名稱字段和批量修改為同一名稱&#xff0c;包括撤銷和恢復功能。 批量添加前后綴可使用預設從指定數字遞增或遞減至指定數字。 資源下載 GitHub 百度網盤&#xff08…

水果商城系統 SpringBoot+Vue

1、技術棧 技術棧&#xff1a;SpringBootVueMybatis等使用環境&#xff1a;Windows10 谷歌瀏覽器開發環境&#xff1a;jdk1.8 Maven mysql Idea 數據庫僅供學習參考 【已經答辯過的畢業設計】 項目源碼地址 2、功能劃分 3、效果演示

化工廠定位的意義?如何有效解決管理難題

化工廠定位是運用于工廠人員定位管理的新技術&#xff0c;這一技術的應用具有特殊的意義&#xff0c;和傳統管理模式相比具有很大的區別&#xff0c;那么&#xff0c;你是否清楚化工廠定位的意義&#xff0c;它是如何有效的去解決工廠現存的管理難題呢? 傳統化工廠管理到底有哪…

PySide6開發桌面程序,PySide6入門實戰(上)

文章目錄 系列文章索引一、前期準備1、簡介及安裝2、PyCharm PySide6環境搭建&#xff08;1&#xff09;基礎環境&#xff08;2&#xff09;配置QT Designer、PyUIC、PyRCC&#xff08;3&#xff09;使用pyside6項目&#xff08;4&#xff09;資源文件編寫與編譯 二、QT常用控件…

排序矩陣查找

題目鏈接 排序矩陣查找 題目描述 注意點 每一行、每一列都按升序排列 解答思路 可以從右上角開始遍歷&#xff0c;如果當前元素就等于target&#xff0c;直接返回true&#xff1b;如果當前元素小于target&#xff0c;則target肯定在當前位置下方&#xff1b;如果當前元素大…

基于深度學習的電力分配

基于深度學習的電力分配是一項利用深度學習算法優化電力系統中的電力資源分配、負荷預測、故障檢測和系統管理的技術。該技術旨在提高電力系統的運行效率、穩定性和可靠性。以下是關于這一領域的系統介紹&#xff1a; 1. 任務和目標 電力分配的主要任務是優化電力系統中的電力…

挑戰杯 LSTM的預測算法 - 股票預測 天氣預測 房價預測

0 簡介 今天學長向大家介紹LSTM基礎 基于LSTM的預測算法 - 股票預測 天氣預測 房價預測 這是一個較為新穎的競賽課題方向&#xff0c;學長非常推薦&#xff01; &#x1f9ff; 更多資料, 項目分享&#xff1a; https://gitee.com/dancheng-senior/postgraduate 1 基于 Ke…

手機飛行模式是什么意思?3個方法教你如何開啟

在現代生活中&#xff0c;手機已經成為我們日常生活中不可或缺的一部分。然而&#xff0c;有時我們需要暫時切斷手機的通信功能&#xff0c;比如在飛機上、開會時或需要安靜休息的時候。這時候&#xff0c;蘋果手機上的“飛行模式”功能就派上了用場。 那么&#xff0c;手機飛…

人臉表情識別Facial Expression Recognition基于Python3和Keras2(TensorFlow后端)

人臉表情識別項目是一個結合了計算機視覺和深度學習技術的高級應用&#xff0c;主要用于分析和理解人類面部表情所傳達的情感狀態。這樣的系統可以用于多種場景&#xff0c;比如情緒分析、用戶交互、市場調研、醫療診斷以及人機接口等領域。 一個典型的人臉表情識別項目可以分…

端到端自動駕駛新突破:Nvidia提出全并行PARA-Drive,斬獲CVPR挑戰賽冠軍

論文標題&#xff1a; PARA-Drive: Parallelized Architecture for Real-time Autonomous Driving 論文作者&#xff1a; Xinshuo Weng, Boris Ivanovic, Yan Wang, Yue Wang, Marco Pavone 導讀&#xff1a; 本文系統分析了自動駕駛高級架構的設計空間&#xff0c;提出了關…

了解安全端口

安全端口的定義和重要性 安全端口是指在網絡通信中&#xff0c;用于特定服務或應用程序的端口&#xff0c;這些端口通常被設計為在網絡層面提供額外的安全性。安全端口的選擇和配置對于保護網絡資源免受未經授權的訪問和攻擊至關重要。 常見的安全端口及其用途 以下是一些常見…

提升內容分享類營銷效果的秘籍大公開

今天有豐富實戰經驗的“蚓鏈數字化營銷平臺”來給大家分享一些能有效提高內容分享類數字化營銷方案中用戶的參與度和轉化率的方法。 創造有價值且引人入勝的內容 一定要讓分享的內容實用、有趣或者獨特&#xff0c;滿足大家的需求和興趣。多運用生動的故事、案例和數據來支持觀…

深入分析 Android BroadcastReceiver (十)(完)

文章目錄 深入分析 Android BroadcastReceiver (十)1. 深入理解 Android 廣播機制的高級應用與實踐1.1 高級應用1.1.1 示例&#xff1a;廣播啟動服務1.1.2 示例&#xff1a;數據變化通知1.1.3 示例&#xff1a;下載完成通知 1.2 實踐建議1.2.1 設置權限1.2.2 動態注冊和注銷廣播…

WIN32核心編程 - 線程操作(二) 同步互斥

公開視頻 -> 鏈接點擊跳轉公開課程博客首頁 -> 鏈接點擊跳轉博客主頁 目錄 競態條件 CriticalSection Mutex CriticalSection & Mutex Semaphore Event 競態條件 多線程環境下&#xff0c;當多個線程同時訪問或者修改同一個數據時&#xff0c;最終結果為線程執…