vue3+element plus动态表单验证

最新推荐文章于 2024-09-24 10:01:00 发布

正在努力学习的白菜

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量360

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46102720/article/details/142102859

版权

要做的效果类似于下面这样：

表单项可以动态的添加和删除，并且表单与校验一一对应

其实就是官方这个例子：

https://element-plus.org/zh-CN/component/form.html

但是当时懵懵的试了好一会才写出来的，记录一下。

<template>
    <div style="width: 1000px;margin: 0 auto;">
     <el-row>
      <el-col :span="2">姓名和班级</el-col>
     <el-col :span="22">
        <el-form :model="studentInfos">
          <el-row v-for="(item, index) in studentInfos.items" :key="index" align="top" style="margin-bottom: 20px;">
                            <el-col :span="10">
                                <el-form-item
                                    :prop="'items.' + index + '.name'"
                                    :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
                                    ><el-input
                                        v-model="item.name"
                                        placeholder="请输入姓名"
                                        type="text"
                                        maxlength="4"
                                        show-word-limit
                                /></el-form-item>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <el-form-item
                                    :prop="'items.' + index + '.class'"
                                    :rules="[
                                        { required: true, message: '请填写班级', trigger: 'blur' },
                                    ]"
                                    ><el-input v-model="item.class" placeholder="请填写班级"
                                /></el-form-item>
                            </el-col>
                            <el-col :span="2" :offset="1">
                                <el-icon>
                                    <Plus v-if="index == 0" @click="addnameItem" />
                                    <Remove v-else @click="deletenameItem(item)" />
                                </el-icon>
                            </el-col>
        </el-row>
        </el-form>
     </el-col>
     </el-row>
    </div>

</template>

<script setup lang="ts">
import { Plus, Remove } from '@element-plus/icons-vue';
import { reactive } from 'vue';
let studentInfos = reactive({
    items: [
        {
            key:'1',
            name: '',
            class: ''
        }
    ]
});
const addnameItem = () => {
  studentInfos.items.push({
        key: Date.now().toString(),
        name: '',
        class: ''
    });
};
const deletenameItem = (item:any) => {
    const index = studentInfos.items.indexOf(item);
    if (index !== -1) {
        studentInfos.items.splice(index, 1);
    }
};
</script>

主要注意点在表单数据的结构，还有在循环中，表单prop属性的书写。