欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證代碼示例

 更新時間：2023年12月15日 08:25:34   作者：reason.  
這篇文章主要給大家介紹了關(guān)于element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證的相關(guān)資料,其實就是利用了vue的v-for循環(huán)渲染,通過添加數(shù)組實現(xiàn)動態(tài)添加表單項,需要的朋友可以參考下

需求分析：

點擊新增后新增一個月度活動詳情，提交時可同時提交多個月度活動詳情。點擊某一個月度活動信息的刪除后可刪除對應(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部分

	/**  點擊新增后增加新的項目  **/
    addItem(){
      // console.log(this.form.dynamicItem);
      this.form.dynamicItem.push({});
    },
    /**  點擊按鈕刪除動態(tài)添加的表單  **/
    delItem(index){
      this.form.dynamicItem.splice(index,1);
    }

頁面中form數(shù)據(jù)對象聲明

// 表單參數(shù)
      form: {
        dynamicItem: []
      },

表單驗證

// 表單校驗
      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: []
      },
      // 表單校驗
      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: []
      },
      // 表單校驗
      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ù)驗證
      subData.forEach((data,index)=>{
        //對提交數(shù)據(jù)進(jì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)行驗證: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){
      //點擊某個日期后彈出彈出框
      this.reset();
      this.open = true;
      this.title = "添加月度活動";
      this.addActiveDate=date;
    },
    /**  點擊新增后增加新的項目  **/
    addItem(){
      // console.log(this.form.dynamicItem);
      this.form.dynamicItem.push({});
    },
    /**  點擊按鈕刪除動態(tài)添加的表單  **/
    delItem(index){
      this.form.dynamicItem.splice(index,1);
    }
  }
};
</script>

整體效果及功能：

刪除某個月度活動：

總結(jié) 

到此這篇關(guān)于element-ui動態(tài)添加表單項并實現(xiàn)事件觸發(fā)驗證的文章就介紹到這了,更多相關(guān)element-ui動態(tài)添加表單項內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論