element ui-动态增删表单项及校验

一、需求

点击添加按钮，增加一条 名称 与数量的表单项；点击每条表单项后面的垃圾桶图标，删除对应表单项。同时对名称和数量增加必填校验；点击确定提交表单信息

二、实现

完成代码

<template>
    <div>
        <el-dialog v-model="modalVisible" width="750px" class="dialog" destroy-on-close>
            <template #header>
                <div class="my-header">
                    <div class="titleClass">添加</div>
                    <div class="titleLine"></div>
                </div>
            </template>
            <div class="add-second">
                <el-form ref="formRef" :model="dynamicValidateForm" label-width="100px">
                    <el-row v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
                        <el-col :span="12" >
                            <el-form-item label="名称" :prop="'domains.' + index + '.name'" :rules="{
                                    required: true,
                                    message: '请选择',
                                    trigger: 'blur',
                                }">
                                <el-select 
                                    v-model="domain.name"
                                    placeholder="请选择" 
                                    style="width:220px"
                                >
                                <el-option v-for="item in state.List" :key="item.value" :label="item.text"
                                    :value="item.value" />
                            </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="数量(个)" :prop="'domains.' + index + '.amount'" :rules="{
                                    required: true,
                                    message: '请输入数量',
                                    trigger: 'blur',
                                }">
                                <el-input-number v-model="domain.amount" placeholder="请输入" controls-position="right" :min="1" :precision="0">
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <div class="img-box mouseStyle">
                            <img src="@/assets/img/shanchu.png" alt="" @click="removeDomain(index)">
                        </div>
                    </el-row>
                    <el-row >
                        <el-col :span="24" >
                                <div class="add-box mouseStyle" @click="addDomain">
                                    <el-icon color="#2561FF" size="14px">
                                        <CirclePlusFilled />
                                    </el-icon>
                                    <div class="add-text">添加</div>
                                </div>
                        </el-col>
                    </el-row>
                 </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onClose">取消</el-button>
                    <el-button type="primary" @click="onConfirm">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

import { ref, reactive, } from 'vue'

let modalVisible = ref(false)
const formRef = ref()
const dynamicValidateForm = reactive<{
    domains: []

}>({
    domains: [
        
    ],
})
let state = reactive({
    List:[]
})
const removeDomain = (index: number) => {
    if (index !== -1) {
        dynamicValidateForm.domains.splice(index, 1)
    }
}

const addDomain = () => {
    dynamicValidateForm.domains.push({
        name: null,
        amount: null
    })
}

const onClose = ()=>{
    modalVisible.value = false
}


// 确定-添加工装
const onConfirm = ()=>{
    //提交表单信息dynamicValidateForm.domains
    
    
}