elementUI 循環出來的表單,怎么做表單校驗?

在這里插入圖片描述
數據結構如下:
diversionParamList: [
{
length: null,
positionNumber: null,
value: null,
}
]

思路:可根據 index 動態綁定 :props 屬性值,校驗規則寫在:rules

<div class="config-item" v-for="(item, index) in form.diversionParamList" :key="index"><el-form-item :label="`分流配置${index + 1}`" :prop="`diversionParamList.${index}.positionNumber`":rules="{ required: true, message: '請輸入位置', trigger: 'blur' }"><span class="config-item-text">位置:</span><el-input-number size="small" style="width: 100px" v-model="item.positionNumber" :min="0"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.length`":rules="{ required: true, message: '請輸入長度', trigger: 'blur' }"><span class="config-item-text">長度:</span><el-input-number size="small" style="width: 100px" v-model="item.length" :min="1"></el-input-number></el-form-item><el-form-item :prop="`diversionParamList.${index}.value`":rules="[{ required: true, message: '請輸入值', trigger: 'blur' }, { pattern: /^[0-9A-Fa-f]+$/, message: '必須是1-9或16進制字符:a-f或A-F' }]"><span class="config-item-text">值:</span><el-input :maxlength="item.length * 2" v-model="item.value" placeholder="請輸入值" style="width: 150px"><template #prefix>0x&nbsp;</template></el-input></el-form-item><div class="button-group"><el-button v-if="index === form.diversionParamList.length - 1" type="primary" size="small"@click="addFormConfig()">新增</el-button><el-button v-if="index !== 0" type="danger" size="small" @click="delFormConfig(index)">刪除</el-button></div>
</div>

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

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

相關文章

x-cmd install | Pillager:Go 語言打造的敏感信息文件系統掃描利器

目錄 Pillager 的獨特優勢安裝Pillager 的應用場景Pillager 的核心功能 還在為文件系統中潛在的敏感信息泄露而擔憂嗎&#xff1f;Pillager 是一款由 Go 語言編寫的強大工具&#xff0c;旨在幫助你輕松掃描文件系統&#xff0c;發現隱藏的密鑰、密碼、API 令牌等敏感信息。 Pil…

大模型(2)——提示工程(Prompt Engineering)

文章目錄 一、提示工程的核心概念為什么需要提示工程&#xff1f; 二、提示設計的基本原則三、實用提示工程技巧1. 角色設定法2. 示例引導法&#xff08;Few-Shot Learning&#xff09;3. 分階段提問4. 負面約束5. 溫度&#xff08;Temperature&#xff09;控制 四、不同任務類…

環境搭建

一個簡單的請求在加入spring security之前的樣子, 在瀏覽器中輸入地址就可以直接訪問 <!--引入spring security依賴--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId>&…

院校機試刷題第六天:1134矩陣翻轉、1052學生成績管理、1409對稱矩陣

一、1134矩陣翻轉 1.題目描述 2.解題思路 很簡單的模擬題&#xff0c;甚至只是上下翻轉&#xff0c;遍歷輸出的時候先把最下面那一行輸出即可。 3.代碼 #include <iostream> #include <vector> using namespace std;int main() {int n;cin >> n;vector&l…

軟件架構風格系列(5):數據共享架構

數據共享架構&#xff1a;如何讓數據在系統間自由“流淌”&#xff1f; 引言 在企業數字化轉型的浪潮中&#xff0c;“數據孤島”成為橫在業務創新面前的大山&#xff1a;營銷系統的用戶畫像無法同步到客服系統&#xff0c;供應鏈的庫存數據難以為銷售決策提供支撐…… 此時&…

SAP-13-內表與工作區

內表 作用&#xff1a; 內表是 ABAP 程序中一種非常重要的數據結構&#xff0c;它類似于數據庫表&#xff0c;用于在程序運行時存儲和處理數據。與數據庫表不同的是&#xff0c;內表存在于程序的內存中&#xff0c;數據的讀寫速度比從數據庫中讀取要快很多。它可以存儲多條具有…

dali本地安裝和使用

Dali&#xff08;Distance-matrix ALIgnment&#xff09;是一種廣泛使用的蛋白質結構比對工具&#xff0c;主要用于比較蛋白質三維結構之間的相似性。它通過計算蛋白質結構之間的距離矩陣來評估結構之間的相似性&#xff0c;并生成比對結果。 1. 安裝 wget http://ekhidna2.b…

Unreal 從入門到精通之SceneCaptureComponent2D實現UI層3D物體360°預覽

文章目錄 前言SceneCaptureComponent2D實現步驟新建渲染目標新建材質UI控件激活3DPreview鼠標拖動旋轉模型最后前言 我們在(電商展示/角色預覽/裝備查看)等應用場景中,經常會看到這種3D展示的頁面。 即使用相機捕獲一個3D的模型的視圖,然后把這個視圖顯示在一個UI畫布上,…

2024CCPC遼寧省賽 個人補題 ABCEGJL

Dashboard - 2024 CCPC Liaoning Provincial Contest - Codeforces 過題難度 B A J C L E G 銅獎 4 953 銀獎 6 991 金獎 8 1664 B&#xff1a; 模擬題 // Code Start Here string s;cin >> s;reverse(all(s));cout << s << endl;A&#xff1a;很…

Java基礎 Day17

一、遞歸 方法直接或者間接調用本身 將大問題, 層層轉化為一個與原問題相似的、規模更小的問題來解決 二、異常 程序在編譯或執行過程中&#xff0c;出現的非正常的情況 (錯誤) 語法錯誤不是異常 1、閱讀異常信息 從下往上看&#xff1a;發生異常的位置、異常名稱、發生異…

hook原理和篡改猴編寫hook腳本

hook原理&#xff1a; hook是常用于js反編譯的技術&#xff1b;翻譯就是鉤子&#xff0c;他的原理就是劫持js的函數然后進行篡改 一段簡單的js代碼 &#xff1a;這個代碼是順序執行的 function test01(){console.log(test01)test02() } function test02(){console.log(02)tes…

使用 Vue 展示 Markdown 文本

使用 Vue 展示 Markdown 文本可以通過以下幾種方法&#xff1a; 方法 1&#xff1a;使用 v-html 指令 可以使用 v-html 指令來渲染 Markdown 文本&#xff1a; <template><div v-html"markdownText"></div> </template> <script>e…

深度解析 Java 中介者模式:重構復雜交互場景的優雅方案

一、中介者模式的核心思想與設計哲學 在軟件開發的歷史長河中&#xff0c;對象間的交互管理一直是架構設計的核心難題。當多個對象形成復雜的網狀交互時&#xff0c;系統會陷入 "牽一發而動全身" 的困境。中介者模式&#xff08;Mediator Pattern&#xff09;作為行…

FreeCAD傻瓜教程-外螺紋的繪制,利用兩個實體進行布爾運算來實現

起因&#xff1a;因為要設計一個波珠螺絲固定器&#xff0c;為了不跑偏&#xff0c;需要在螺柱上加工一個直徑6mm&#xff0c;深度1.2mm的圓弧凹槽所以想用泉州制造的6.8車銑加工。 但是該加工目前不支持軸向的鉆孔&#xff0c;所以想著干脆在兩端加上M8的螺栓&#xff0c;也起…

權限控制相關實現

Spring Boot-Shiro-Vue&#xff1a; 這個項目可以滿足基本的權限控制需求&#xff0c;前后端都有&#xff0c;開箱即用

Node.js路徑處理指南:如何安全獲取當前腳本目錄路徑

本文適用于 Node.js 14.x及以上版本&#xff0c;同時覆蓋 CommonJS 和 ES Modules 模塊系統 文章目錄 一、為什么需要關注路徑問題&#xff1f;二、三種核心方法詳解方法1&#xff1a;經典方案 __dirname (CommonJS)方法2&#xff1a;ES Modules 解決方案方法3&#xff1a;動態…

web基礎

域名概述 2-1 域名的概念&#xff1a;IP 地址不易記憶&#xff0c;域名是互聯網絡上識別和定位計算機的層次結構式的字符標識&#xff0c;與該計算機的互聯網協議 (IP) 地址相對應&#xff0c;用于在數據傳輸時標識計算機的電子方位&#xff0c;方便人們記憶和輸入。 早期使用…

醫療行業數據共享新實踐:如何用QuickAPI打通診療全流程數據壁壘

在醫療行業&#xff0c;數據的高效流轉直接影響診療效率和患者體驗。某三甲醫院在數字化轉型中發現&#xff0c;雖然已積累大量核心業務數據&#xff0c;但各科室系統間的數據互通仍存在明顯瓶頸——檢驗科的報告無法實時同步至門診系統&#xff0c;藥房庫存數據與采購系統脫節…

高級認知型Agent

目標: 構建一個具備自主規劃、多步推理、工具使用、自我反思和環境交互能力的智能代理,使其能夠高效、可靠地完成復雜任務。 核心理念: Agent的智能涌現于一個精密的認知循環: 感知 (Perceive) -> 理解與規劃 (Think/Plan - 想) -> 信息獲取 (Search/Act - 查) -&g…

百度地圖的地鐵圖API所有城市的城市名和citycode的對照關系列表

百度地圖的地鐵圖API所有城市的城市名和citycode的對照關系列表 城市keywordcitycode北京beijing131上海shanghai289廣州guangzhou257深圳shenzhen340重慶chongqing132天津tianjin332石家莊shijiazhuang150南京nanjing315成都chengdu75沈陽shenyang58杭州hangzhou179武漢wuhan2…