vue2 element ui 表單 動態增加表單項 表單項值不可重復 select多選

案例?

<template><el-form :model="form" ref="form" label-width="70px"><el-form-item><el-button icon="el-icon-plus" type="primary" plain @click="add">新增</el-button><el-button @click="resetForm('form')">重置</el-button></el-form-item><el-row :gutter="20" v-for="(user, index) in form.userList"><el-col :span="6"><el-form-item label="用戶":prop="'userList.' + index + '.userId'":rules="[{required: true, message: '用戶不能為空', trigger: ['blur','change']},{ validator: validUser, trigger: ['blur','change'] }]"><el-select v-model="user.userId"placeholder="請選擇用戶"><el-option v-for="(item,index) in uList":label="item.userName" :value="item.userId"  :key="item.userId"></el-option></el-select></el-form-item></el-col><el-col :span="16"><el-form-item label="職能":prop="'userList.' + index + '.roleId'":rules="{required: true, message: '職能不能為空', trigger: ['blur','change']}"><el-selectv-model="user.roleId"multipleplaceholder="請選擇職能"><el-optionv-for="dict in dict.type.zhineng_dict":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="2" v-if="index !==0"><el-button type="danger" icon="el-icon-delete" plain @click.prevent="handleDelete(user)"></el-button></el-col></el-row></el-form>
</template><script>export default {name: "",dicts: ['zhineng_dict'],data(){return {// 表單form: {userList: []},// 人員列表uList: [],}},mounted() {this.getuList()this.setDefault()},methods: {validUser(rule, value, callback){let userArr = [];this.form.userList.forEach(item => {userArr.push(item.userId)})if (userArr.length !== [...new Set(userArr)].length) {callback(new Error('用戶不可以重復'));}else {callback();}},/* 設置默認 */setDefault() {this.form.userList.push({userId: '',roleId: [],key: Date.now()})},/* 刪除 */handleDelete(user) {var index = this.form.userList.indexOf(user)if (index !== -1) {this.form.userList.splice(index, 1)}},getuList(){this.uList= response.data;},resetForm(formName) {this.$refs[formName].resetFields();},/* 新增 */add(){this.form.userList.push({userId: '',roleId: [],key: Date.now()});}}
}
</script>

注意

1、select為多選時,默認值需設置為[],否則未填值前就會報校驗錯誤

2、表單必須為object,不能用[ ],會報錯

??

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

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

相關文章

VUE3-Elementplus-form表單-筆記

1. 結構相關 el-row表示一行&#xff0c;一行分成24份 el-col表示列 (1) :span"12" 代表在一行中&#xff0c;占12份 (50%) (2) :span"6" 表示在一行中&#xff0c;占6份 (25%) (3) :offset"3" 代表在一行中&#xff0c;左側margin份數 el…

后勞動經濟學(PLE):AI時代的工作未來

引言 隨著人工智能&#xff08;AI&#xff09;和自動化技術的飛速發展&#xff0c;我們迎來了一個新的經濟范式——后勞動經濟學&#xff08;PLE&#xff09;。這一概念主要討論在AI和自動化技術超越人類能力的關鍵領域后&#xff0c;機器將不可避免地在許多經濟活動中取代人類…

如何玩單機版:QQ音速

前言 我是研究單機的老羅&#xff0c;今天教大家帶來一款懷舊游戲QQ音速 的教程。根據我的文章&#xff0c;一步一步就可以玩了。 如今市面上的資源參差不齊&#xff0c;大部分的都不能運行&#xff0c;本人親自測試&#xff0c;運行視頻如下&#xff1a; QQ音速 搭建教程 此…

python之GIL鎖詳解

目錄 1.GIL是什么以及影響 2.為什么會有GIL鎖&#xff1f; 1.GIL是什么以及影響 在Python中&#xff0c;多線程的并發性受到全局解釋器鎖&#xff08;GIL&#xff0c;Global Interpreter Lock&#xff09;的影響。GIL是CPython&#xff08;Python的官方實現&#xff09;中的…

vscode下無法識別node、npm的問題

node : 無法將“node”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱 因為node是在cmd安裝的&#xff0c;是全局安裝的&#xff0c;并不是在這個項目里安裝的。 解決方案&#xff1a; 1.在vscode的控制臺&#xff0c;針對一個項目安裝特定版本的node&#xff1b; 2.已經…

C++(Python)肥皂泡沫普拉托邊界膜曲面模型算法

&#x1f3af;要點 &#x1f3af;肥皂泡二維流體模擬 | &#x1f3af;泡沫普拉托邊界膜曲面模型算法演化厚度變化 | &#x1f3af;螺旋曲面三周期最小結構生成 &#x1f4dc;皂膜用例&#xff1a;Python計算物理粒子及拉格朗日和哈密頓動力學 | Python和MATLAB粘性力接觸力動…

SAP系統中的應收賬款(客戶主數據,日常交易,催收,爭議管理)

1. 客戶主數據 Customer Accounts (客戶賬戶&#xff09;:客戶賬戶由兩部分General Data&#xff08;通用數據&#xff09;和Company Code Data&#xff08;公司代碼段數據&#xff09;組成。通用數據是在client級別獨立于公司代碼的數據&#xff0c;例如客戶的地址&#xff0…

鴻蒙開發設備管理:【@ohos.multimodalInput.inputEventClient (注入按鍵)】

注入按鍵 InputEventClient模塊提供了注入按鍵能力。 說明&#xff1a; 本模塊首批接口從API version 8開始支持。后續版本的新增接口&#xff0c;采用上角標單獨標記接口的起始版本。本模塊接口均為系統接口&#xff0c;三方應用不支持調用。 導入模塊 import inputEventCli…

愛情再啟:莊國棟笑談“玫瑰人生”愛情覺悟

莊國棟&#xff0c;這位電視劇《玫瑰的故事》中的男主角&#xff0c; 最近在一次采訪中坦言&#xff1a;“如果給我一次重來的機會&#xff0c; 我絕對會毫不猶豫地選擇愛情&#xff01;” 聽到這話&#xff0c; 我不禁想&#xff0c;莊先生&#xff0c;您是不是被劇里的玫瑰…

Solidworke學習(裝配體3)

目錄 本節學習內容&#xff1a; 一、高級配合 &#xff08;1&#xff09;對稱配合 &#xff08;2&#xff09;寬度配合 &#xff08;3&#xff09;距離配合 二、機械配合 &#xff08;1&#xff09;凸輪配合 &#xff08;2&#xff09;槽口配合 三、快捷菜單 本節學習…

python工作目錄與文件目錄

工作目錄 文件目錄&#xff1a;文件所在的目錄 工作目錄&#xff1a;執行python命令所在的目錄 D:. | main.py | ---data | data.txt | ---model | | model.py | | train.py | | __init__.py | | | ---nlp | | | bert.py | …

計算機網絡期末復習(大題+小題)

計算機網絡期末復習 一、計算機網絡概述 Point 1 計算機網絡就是以傳輸信息為基本目的&#xff0c;用通信線路和通信設備將多個計算機連接起來的計算機系統的集合。由自治的計算機互聯起來的結合體。 Point 2 按網絡的覆蓋范圍進行分類 &#xff08;1&#xff09;局域網*…

解鎖Transformer的魯棒性:深入分析與實踐指南

&#x1f6e1;? 解鎖Transformer的魯棒性&#xff1a;深入分析與實踐指南 Transformer模型自從由Vaswani等人在2017年提出以來&#xff0c;已經成為自然語言處理&#xff08;NLP&#xff09;領域的明星模型。然而&#xff0c;模型的魯棒性——即模型在面對異常、惡意或不尋常…

人機交互新維度|碩博電子發布雙編碼器操作面板、無線操作面板等新品

6月15日&#xff0c;碩博電子召開了一場新品發布會&#xff0c;向業界展示了多項前沿技術成果&#xff0c;其中備受矚目的當屬SPM-KEYP-D08雙編碼器操作面板、SPM-KEYP-D16W無線操作面板、SPR-HT-XK12A無線手持發射端以及SPQ-WT-B01灑水車專用控制面板。這些創新產品的亮相&…

文心一言 VS 訊飛星火 VS chatgpt (292)-- 算法導論21.3 5題

五、證明&#xff1a;任何具有 m 個 MAKE-SET、UNION 和 FIND-SET 操作的序列&#xff0c;這里所有的 LINK 操作都出現在 FIND-SET 操作之前&#xff0c;如果同時使用路徑壓縮和按秩合并啟發式策略&#xff0c;則這些操作只需 O(m) 的時間。在同樣情況下&#xff0c;如果只使用…

Class Constructors and Destructors (類的構造函數和析構函數)

Class Constructors and Destructors [類的構造函數和析構函數] 1. Declaring and Defining Constructors (聲明和定義構造函數)2. Using Constructors (使用構造函數)3. Default Constructors (默認構造函數)4. Destructors (析構函數)5. Improving the Stock Class (改進 Sto…

MT1597 平行線

題目 用下面的數據類型表示線&#xff1a; struct POINT { //點 int x, y; //坐標值x和y } ; struct LINE { //線 POINT s, e; //線的兩端 } ; 輸入2個線段的端點的坐標值x和y&#xff0c;判斷兩條線段所在直線是否為平行線。如果兩線段共線&#xff0c;判為不平行。 輸入…

強強聯合:Apache Kylin與Impala的集成之道

&#x1f517; 強強聯合&#xff1a;Apache Kylin與Impala的集成之道 在大數據時代&#xff0c;Apache Kylin和Impala都是分析型數據庫的佼佼者&#xff0c;分別以預計算的OLAP引擎和高性能的SQL on Hadoop解決方案而聞名。將兩者集成&#xff0c;可以充分利用Kylin的預計算能…

C程序設計譚浩強第五版

第三章 程序習題 1、第2題2、第2題3、第3題4、第4題 1、第2題 假如我國國民生產總值的年增長率為7%&#xff0c; 計算10年后我國國民生產總值與現在相比增長多少百分比。計算公式為 p ( 1 r ) n p (1r)^n p(1r)n ,其中r為年增長率&#xff0c;n為年數&#xff0c;p為與現在…

thinkphp通過with查詢,并通過關聯表進行篩選

直接添加一個where條件,然后條件里面用表名.字段即可,非常方便 需要注意的一點是在fastadmin里面,$this->auth->getGroupIds()這樣獲取是會獲取到緩存里面的值,必須重新登錄之后才可以得到最新的用戶組,這個問題導致困擾了我一晚上 $usage $this->model->with([us…