element-ui動態(tài)添加表單項并實(shí)現(xiàn)事件觸發(fā)驗(yàn)證代碼示例
更新時間：2023年12月15日 08:25:34 作者：reason.
這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)添加表單項并實(shí)現(xiàn)事件觸發(fā)驗(yàn)證的相關(guān)資料,其實(shí)就是利用了vue的v-for循環(huán)渲染,通過添加數(shù)組實(shí)現(xiàn)動態(tài)添加表單項,需要的朋友可以參考下
需求分析：
點(diǎn)擊新增后新增一個月度活動詳情，提交時可同時提交多個月度活動詳情。點(diǎn)擊某一個月度活動信息的刪除后可刪除對應(yīng)月度活動信息
H5部分：
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<!-- 動態(tài)產(chǎn)生重復(fù)表單項 -->
<el-row>
<el-col :span="8">
<el-form-item label="活動類型" prop="type" >
<el-select v-model="item.type" placeholder="請選擇活動類型">
<el-option v-for="dict in activeType"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" >
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活動開始時間" prop="starttime">
<el-time-picker
v-model="item.starttime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活動開始時間"
style="width: 30%">
</el-time-picker>
至
<el-time-picker
style="width: 30%"
v-model="item.endtime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活動結(jié)束時間">
</el-time-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="活動人數(shù)" prop="ptotal">
<el-select v-model="item.ptotal" placeholder="請選擇活動人數(shù)">
<el-option v-for="dict in activePtotal"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="報名開始時間" prop="regTime">
<el-date-picker
v-model="item.regTime"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="活動題目" prop="title">
<el-input v-model="item.title" placeholder="請輸入活動題目" />
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="活動場景" prop="scene">
<el-radio-group v-model="item.scene">
<el-radio :key="3" :label="1">室內(nèi)</el-radio>
<el-radio :key="4" :label="2">室外</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活動室名稱" prop="roomnum">
<el-select v-model="item.roomnum" placeholder="請選擇活動室名稱">
<el-option label="請選擇字典生成" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活動預(yù)算" prop="badget">
<el-input v-model="item.badget" placeholder="請輸入活動預(yù)算" />
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="8">
<el-form-item label="活動主管" prop="manager">
<el-input v-model="item.manager" placeholder="請輸入活動主管" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="協(xié)助人員" prop="assistant">
<el-input v-model="item.assistant" placeholder="請輸入?yún)f(xié)助人員" />
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">刪除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>抽取H5部分的主要框架：
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<!-- 動態(tài)產(chǎn)生重復(fù)表單項 -->
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<el-row>
<el-col :span="8">
<el-form-item label="活動類型" prop="type" >
表單項1
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活動開始時間" prop="starttime">
表單項2
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">刪除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
js部分
/** 點(diǎn)擊新增后增加新的項目 **/
addItem(){
// console.log(this.form.dynamicItem);
this.form.dynamicItem.push({});
},
/** 點(diǎn)擊按鈕刪除動態(tài)添加的表單 **/
delItem(index){
this.form.dynamicItem.splice(index,1);
}
頁面中form數(shù)據(jù)對象聲明
// 表單參數(shù)
form: {
dynamicItem: []
},
表單驗(yàn)證
// 表單校驗(yàn)
rules: {
type: [{ required: true, message: "活動類型不能為空", trigger: "change" }],
starttime: [{ required: true, message: "活動開始時間不能為空", trigger: "blur" }],
endtime: [{ required: true, message: "活動結(jié)束時間不能為空", trigger: "blur" }],
ptotal: [{ required: true, message: "活動人數(shù)不能為空", trigger: "change" }],
regTime: [{ required: true, message: "報名時間不能為空", trigger: "blur" }],
title: [{ required: true, message: "活動題目不能為空", trigger: "blur" }],
roomnum: [{ required: true, message: "活動室名稱不能為空", trigger: "change" }],
badget: [{ required: true, message: "活動預(yù)算不能為空", trigger: "blur" }],
manager: [{ required: true, message: "活動主管不能為空", trigger: "blur" }],
}
export default {
name: "Month",
components: {
Form
},
data() {
return {
// 表單參數(shù)
form: {
dynamicItem: []
},
// 表單校驗(yàn)
rules: {
type: [{ required: true, message: "活動類型不能為空", trigger: "change" }],
starttime: [{ required: true, message: "活動開始時間不能為空", trigger: "blur" }],
endtime: [{ required: true, message: "活動結(jié)束時間不能為空", trigger: "blur" }],
ptotal: [{ required: true, message: "活動人數(shù)不能為空", trigger: "change" }],
regTime: [{ required: true, message: "報名時間不能為空", trigger: "blur" }],
title: [{ required: true, message: "活動題目不能為空", trigger: "blur" }],
roomnum: [{ required: true, message: "活動室名稱不能為空", trigger: "change" }],
badget: [{ required: true, message: "活動預(yù)算不能為空", trigger: "blur" }],
manager: [{ required: true, message: "活動主管不能為空", trigger: "blur" }],
}
};
},
};
完整demo
<template>
<div class="app-container">
<el-date-picker
v-model="monthValue"
type="month"
style="width: 120px"
value-format="yyyy-MM"
format="yyyy-MM"
placeholder="選擇月"
@change="changeMonth"
>
</el-date-picker>
<el-calendar v-model="nowDate" >
<template
slot="dateCell"
slot-scope="{date, data}"
>
<p :class="data.isSelected ? 'is-selected' : ''" style="width: 100%;height: 100%;" @click="clickDate(date)">
{{ data.day.split('-').slice(1).join('月')+"日"}} {{ data.isSelected ? '??' : ''}}
</p>
</template>
</el-calendar>
<!-- 對話框(添加 / 修改) -->
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-button @click="addItem" type="primary">增加</el-button>
<div v-for="(item, index) in form.dynamicItem" :key="index" style="background-color:#f2f5f9;margin: 10px;" >
<el-form :model="form.dynamicItem[index]" :rules="rules" label-width="120px">
<!-- 動態(tài)產(chǎn)生重復(fù)表單項 -->
<el-row>
<el-col :span="8">
<el-form-item label="活動類型" prop="type" >
<el-select v-model="item.type" placeholder="請選擇活動類型">
<el-option v-for="dict in activeType"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" >
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="活動開始時間" prop="starttime">
<el-time-picker
v-model="item.starttime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活動開始時間"
style="width: 30%">
</el-time-picker>
至
<el-time-picker
style="width: 30%"
v-model="item.endtime"
format = 'HH:mm'
value-format = 'HH:mm'
placeholder="活動結(jié)束時間">
</el-time-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="活動人數(shù)" prop="ptotal">
<el-select v-model="item.ptotal" placeholder="請選擇活動人數(shù)">
<el-option v-for="dict in activePtotal"
:key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="報名開始時間" prop="regTime">
<el-date-picker
v-model="item.regTime"
type="daterange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="活動題目" prop="title">
<el-input v-model="item.title" placeholder="請輸入活動題目" />
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="活動場景" prop="scene">
<el-radio-group v-model="item.scene">
<el-radio :key="3" :label="1">室內(nèi)</el-radio>
<el-radio :key="4" :label="2">室外</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活動室名稱" prop="roomnum">
<el-select v-model="item.roomnum" placeholder="請選擇活動室名稱">
<el-option label="請選擇字典生成" value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活動預(yù)算" prop="badget">
<el-input v-model="item.badget" placeholder="請輸入活動預(yù)算" />
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="8">
<el-form-item label="活動主管" prop="manager">
<el-input v-model="item.manager" placeholder="請輸入活動主管" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="協(xié)助人員" prop="assistant">
<el-input v-model="item.assistant" placeholder="請輸入?yún)f(xié)助人員" />
</el-form-item>
</el-col>
<el-button @click="delItem(index)" type="danger" style="float: right;">刪除</el-button>
</el-row>
</el-form>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<style rel="stylesheet/scss" lang="scss">
@import "~@/assets/styles/month.scss";
</style>
<script>
import {
createMonth,
updateMonth,
deleteMonth,
getMonth,
getMonthPage,
exportMonthExcel,
createMonthActivities
} from '@/api/activity/month'
import {DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2} from "@/utils/dict";
import Form from '@/views/bpm/form'
export default {
name: "Month",
components: {
Form
},
data() {
return {
//活動類型下拉框獲取后端數(shù)據(jù)
activeType:null,
//活動人數(shù)下拉框獲取后端數(shù)據(jù)
activePtotal:null,
monthValue:null,
nowDate:new Date(),
// 遮罩層
loading: true,
// 導(dǎo)出遮罩層
exportLoading: false,
// 顯示搜索條件
showSearch: true,
// 總條數(shù)
total: 0,
// 月度活動列表
list: [],
// 彈出層標(biāo)題
title: "",
// 是否顯示彈出層
open: false,
dateRangeTime: [],
dateRangeRegTime: [],
dateRangeCreateTime: [],
//新增活動日期
addActiveDate:null,
// 查詢參數(shù)
queryParams: {
pageNo: 1,
pageSize: 10,
id: null,
type: null,
ptotal: null,
title: null,
scene: null,
roomnum: null,
badget: null,
manager: null,
assistant: null,
},
// 表單參數(shù)
form: {
dynamicItem: []
},
// 表單校驗(yàn)
rules: {
type: [{ required: true, message: "活動類型不能為空", trigger: "change" }],
starttime: [{ required: true, message: "活動開始時間不能為空", trigger: "blur" }],
endtime: [{ required: true, message: "活動結(jié)束時間不能為空", trigger: "blur" }],
ptotal: [{ required: true, message: "活動人數(shù)不能為空", trigger: "change" }],
regTime: [{ required: true, message: "報名時間不能為空", trigger: "blur" }],
title: [{ required: true, message: "活動題目不能為空", trigger: "blur" }],
roomnum: [{ required: true, message: "活動室名稱不能為空", trigger: "change" }],
badget: [{ required: true, message: "活動預(yù)算不能為空", trigger: "blur" }],
manager: [{ required: true, message: "活動主管不能為空", trigger: "blur" }],
}
};
},
created() {
this.monthValue=this.nowDate;
this.getList();
//活動類型下拉框獲取數(shù)據(jù)
this.activeType=this.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_TYPE);
//活動人數(shù)下拉框獲取數(shù)據(jù)
this.activePtotal=this.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_PTOTAL);
//活動場景單選框數(shù)據(jù)
// this.activeScene=this.getDictDatas(DICT_TYPE.ACTIVITY_MONTH_SCENE);
},
methods: {
/** 查詢列表 */
getList() {
this.loading = true;
// 處理查詢參數(shù)
let params = {...this.queryParams};
this.addBeginAndEndTime(params, this.dateRangeTime, 'time');
this.addBeginAndEndTime(params, this.dateRangeRegTime, 'regTime');
this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
// 執(zhí)行查詢
getMonthPage(params).then(response => {
this.list = response.data.list;
this.total = response.data.total;
this.loading = false;
});
},
/** 取消按鈕 */
cancel() {
this.open = false;
this.reset();
},
/** 表單重置 */
reset() {
this.form.dynamicItem = [];
this.resetForm("form");
},
/** 提交按鈕 */
submitForm() {
var flag=0;
var subData=this.form.dynamicItem;
//提交數(shù)據(jù)驗(yàn)證
subData.forEach((data,index)=>{
//對提交數(shù)據(jù)進(jìn)行驗(yàn)證:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badget
if (!data.type||!data.starttime||!data.endtime||!data.ptotal||!data.regTime||!data.title||!data.roomnum||!data.manager||!data.badget){
alert("數(shù)據(jù)提交異常1");
flag=1;
}
}
)
if (flag===1){
return;
}
//數(shù)據(jù)信息進(jìn)行處理并進(jìn)行提交
subData.forEach((data,index)=>{
//對提交數(shù)據(jù)進(jìn)行驗(yàn)證:type,starttime,endtime,ptotal,regTime,title,roomnum,manager,badget
data.regStarttime=data.regTime[0];
data.regEndtime=data.regTime[1];
if (typeof(data.starttime )=='string'){
var hourAndMinutesS=data.starttime.split(':');
data.starttime=new Date(this.addActiveDate.setHours(parseInt(hourAndMinutesS[0])));
data.starttime=new Date(this.addActiveDate.setMinutes(parseInt(hourAndMinutesS[1])));
}
if (typeof(data.endtime )=='string'){
var hourAndMinutesE=data.endtime.split(':');
data.endtime=new Date(this.addActiveDate.setHours(hourAndMinutesE[0]));
data.endtime=new Date(this.addActiveDate.setMinutes(hourAndMinutesE[1]));
}
console.log("處理過后的數(shù)據(jù)對象",data);
console.log("數(shù)據(jù)"+index,data);
}
)
console.log(this.form.dynamicItem);
// 添加的提交
createMonthActivities(this.form.dynamicItem).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
},
/** 上方月份選擇后下方日歷的聯(lián)動 **/
changeMonth() {
//上方日期選擇器選擇了月份后，下方日歷顯示為選中月份
this.nowDate = new Date(this.monthValue);
console.log("this.nowDate",this.nowDate);
},
clickDate(date){
//點(diǎn)擊某個日期后彈出彈出框
this.reset();
this.open = true;
this.title = "添加月度活動";
this.addActiveDate=date;
},
/** 點(diǎn)擊新增后增加新的項目 **/
addItem(){
// console.log(this.form.dynamicItem);
this.form.dynamicItem.push({});
},
/** 點(diǎn)擊按鈕刪除動態(tài)添加的表單 **/
delItem(index){
this.form.dynamicItem.splice(index,1);
}
}
};
</script>整體效果及功能：
刪除某個月度活動：
總結(jié)
到此這篇關(guān)于element-ui動態(tài)添加表單項并實(shí)現(xiàn)事件觸發(fā)驗(yàn)證的文章就介紹到這了,更多相關(guān)element-ui動態(tài)添加表單項內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本文主要介紹了vue-socket.io使用教程與踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue項目預(yù)覽excel表格功能(file-viewer插件)
這篇文章主要介紹了vue項目預(yù)覽excel表格功能(file-viewer插件),本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
關(guān)于antd中select搜索框改變搜索值的問題
這篇文章主要介紹了關(guān)于antd中select搜索框改變搜索值的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue3+ElementPlus在el-table表格中顯示時間的示例代碼
文章介紹了如何在Vue3+ElementPlus的el-table表格中顯示時間,并提供了相關(guān)的代碼示例,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue 針對瀏覽器參數(shù)過長實(shí)現(xiàn)瀏覽器參數(shù)加密解密的操作方法
文章介紹了如何在Vue項目中使用crypto-js庫對瀏覽器參數(shù)進(jìn)行加密和解密,以解決參數(shù)過長的問題,在router/index.js中添加了相關(guān)代碼,并在utils工具類中添加了encryption.js和query.js源碼,感興趣的朋友一起看看吧2024-12-12
Web應(yīng)用程序中資源分頁不僅對性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動態(tài)和可用的分頁組件2022-12-12
這篇文章主要為大家介紹了vue使用?monaco?editor?漢化右鍵菜單實(shí)現(xiàn)漢化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
解決antd datepicker 獲取時間默認(rèn)少8個小時的問題
這篇文章主要介紹了解決antd datepicker 獲取時間默認(rèn)少8個小時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10