element —— 动态新增删除form表单必填验证

小曲曲

已于 2023-01-19 09:20:43 修改

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2023-01-13 17:20:45 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/128677162

版权

vue 专栏收录该内容

141 篇文章 3 订阅

订阅专栏

文章展示了如何在Vue.js应用中进行动态表单验证，特别是针对数组内的表单项。使用`v-for`循环动态生成表单元素，并通过`:prop`和`:rules`属性设置验证规则，同时提供了添加和删除表单项的功能。当表单提交时，进行了验证并处理响应数据。

摘要由CSDN通过智能技术生成

在这里插入图片描述

注意：
:prop=“ruleDetails.${index}.rechargeAmount” 注意属性前边不加ruleForm
:rules=“rules.rechargeAmount” 单独设置rules

<template>
  <div>
    <el-dialog :title="id ? '编辑优惠' : '新增优惠'" :visible.sync="show" @close="resetForm">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="优惠名称" prop="discountsActivityName">
          <el-input v-model="ruleForm.discountsActivityName" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        
        <!-- 动态增删表单必填验证 
          1、:prop="`ruleDetails.${index}.rechargeAmount`" 注意属性前边不加ruleForm
          2、:rules="rules.rechargeAmount" 单独设置rules
        -->
        <el-row v-for="(item, index) in ruleForm.ruleDetails" :key="index">
          <el-col :span="11">
            <el-form-item label="充值/元" :prop="`ruleDetails.${index}.rechargeAmount`" :rules="rules.rechargeAmount">
              <el-input type="number" v-model="item.rechargeAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="赠送/元" :prop="`ruleDetails.${index}.discountsAmount`" :rules="rules.discountsAmount">
              <el-input type="number" v-model="item.discountsAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <i v-if="index == 0" class="blue size-32 flex_r el-icon-circle-plus" @click="add"></i>
            <i v-else class="red size-32 flex_r el-icon-remove" @click="del(index)"></i>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="ruleForm.remark" rows="3" maxlength="200" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  infoApi,
  addApi,
} from "@/api/member/discount.js";

export default {
  data() {
    return {
      id: '',
      show: false,
      ruleForm: {
        discountsActivityName: '',
        remark: '',
        ruleDetails: [{  // 初始值一条
          rechargeAmount: '',
          discountsAmount: '',
        }]
      },
      rules: {
        discountsActivityName: [
          { required: true, message: '请输入优惠名称', trigger: 'blur' },
        ],
        rechargeAmount: [  // 定义每个字段规则
          { required: true, message: '请输入充值金额', trigger: 'blur' },
        ],
        discountsAmount: [
          { required: true, message: '请输入赠送金额', trigger: 'blur' },
        ],
      },

    };
  },

  mounted() { },
  methods: {
    // 用于暴露给父组件
    init(id) {
      if (id) {
        this.id = id
        infoApi({
          discountsActivityId: this.id
        }).then(res => {
          this.ruleForm = res.data
        })
      }
      this.show = true;
    },
    add() {
      this.ruleForm.ruleDetails.push({
        rechargeAmount: '',
        discountsAmount: '',
      })
    },
    del(index) {
      this.ruleForm.ruleDetails.splice(index, 1)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          addApi(this.ruleForm).then(res => {
            this.$message.success(this.id ? '编辑成功' : '新增成功')
            this.show = false
            this.$emit('update')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields();
      this.ruleForm.ruleDetails = [{
        rechargeAmount: '',
        discountsAmount: '',
      }]
      this.id = ''
    },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.getList(1);
    },
  },
};
</script>