vue3 +elementplus | vue2+elementui 动态地通过验证规则子新增或删除单个表单字段

效果图
在这里插入图片描述
点击 ‘+’ 新增一行，点击‘-’ 删除一行

vue3+elementplus写法

template

<el-dialog v-model="dialogFormVisible" :title="title"><el-form ref="ruleFormRef" :model="form" :inline="true" label-width="120px" class="demo-ruleForm":size="formSize" status-icon><el-form-item label="教师编号：" prop="code" :rules="[{ required: true, message: '请输入教师编号', trigger: 'blur' },{ min: 4, message: '长度不能少于四位', trigger: 'blur' }]"><el-input v-model="form.code" /></el-form-item><el-form-item label="教师姓名：" prop="name" :rules="[{ required: true, message: '请输入教师姓名', trigger: 'blur' }]"><el-input v-model="form.name" /></el-form-item><div v-for="(item, index) in form.addList" :key="item.key" flex><!--注意：官方给的例子是用form的addList 去作为prop的标记  --><el-form-item label="授课院系：" :prop="'addList.' + index + '.yuanxi'" :rules="{required: true,message: '授课院系不能为空',trigger: 'change',}"><el-select v-model="item.yuanxi" placeholder="请选择" @change="chooseClass(index)"><el-option :label="yx.department" :value="yx.id" v-for="(yx, indexyx) in departmentList":key="indexyx"></el-option></el-select></el-form-item><el-form-item label="授课班级：" :prop="'addList.' + index + '.banji'" :rules="{required: true,message: '授课班级不能为空',trigger: 'change',}"><el-select v-model="item.banji" placeholder="请选择"><el-option :label="bj.class_title" :value="bj.id" v-for="(bj, indexbj) in item.classesList":key="indexbj"></el-option></el-select></el-form-item><el-icon :size="26" color="#264E71" @click="removeOne(index)"><Remove /></el-icon><el-icon :size="26" color="#264E71" @click="plusOne(index)"><CirclePlus /></el-icon></div><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button><el-button @click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form></el-dialog>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { EpPropMergeType } from 'element-plus/es/utils';
import { departmentDepartmentList, departmentClassesList } from '../../request/api'
import { DepartmentListtype } from '~/type/login';
import userMainStore from "../../store/modules/app";
const mainStore = userMainStore();
import { CirclePlus, Remove } from '@element-plus/icons-vue';const props = defineProps({title: {default: '',type: String,},
})const dialogFormVisible = ref(false)
interface addlistType {yuanxi: string,banji: string,classesList: any,key: number}
interface RuleForm {code: string,name: string,addList: addlistType[]
}
const formSize = ref<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", unknown> | undefined>('default')
const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({code: '',name: '',addList: [{yuanxi: '',banji: '',classesList: [],key: Date.now(),}]
})
const plusOne = (index: number) => {form.addList.push({yuanxi: "",banji: '',classesList: [],key: Date.now(),})console.log(form, 'form00000');}
const removeOne = (index: number) => {form.addList.splice(index, 1)
}
let departmentList = ref([] as any[])
const chooseClass = (index: number) => {form.addList[index].classesList = []form.addList[index].banji = ''classes(index)}
const classes = (index: number) => {let params = {token: mainStore.Authorization,limit: 1000,department: form.addList[index].yuanxi};departmentClassesList(params).then((res) => {let { data, code } = res;if (code == 200) {form.addList[index].classesList = data.listconsole.log(form, 'form11111');}});
}const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {// console.log('submit!')console.log(form, 'form')} else {console.log('error submit!', fields)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.resetFields()
}
const showDio1 = () => {dialogFormVisible.value = true
}
const department = () => {let params: DepartmentListtype = {token: mainStore.Authorization,limit: 1000,page: 1};departmentDepartmentList(params).then((res) => {let { data, code } = res;if (code == 200) {departmentList.value = data.list}});
}
// 第二部：暴露方法
defineExpose({showDio1
})
onMounted(() => {department()
})
</script>

vue2+elementui 写法

template

<el-dialog :title="title" :visible.sync="centerDialogVisible" width="806px" @close="closeDio()"v-if="centerDialogVisible"><div><el-form ref="form" :inline="true" :model="form" label-width="120px"><el-form-item label="教师编号：" prop="code" :rules="[{ required: true, message: '请输入教师编号', trigger: 'blur' },{ min: 4, message: '长度不能少于四位', trigger: 'blur' }]"><el-input v-model="form.code" onkeyup="value=value.replace(/[\W]/g,'')"placeholder="请输入教师编号"></el-input></el-form-item><el-form-item label="教师姓名：" prop="name" :rules="[{ required: true, message: '请输入教师姓名', trigger: 'blur' }]"><el-input v-model="form.name" type="text" @input="form.name = form.name.replace(/[^\u4E00-\u9FA5]/g,'')" placeholder="请输入教师姓名"></el-input></el-form-item><div flex v-for="(item, index) in form.addList" :key="index"><el-form-item label="授课院系：" :prop="'addList.' + index + '.yuanxi'" :rules="{required: true, message: '授课院系不能为空', trigger: 'change'}"><el-select v-model="item.yuanxi" filterable placeholder="请选择" @change="chooseClass(index)"><el-option :label="yx.department" :value="yx.id" v-for="(yx, indexyx) in departmentList":key="indexyx"></el-option></el-select></el-form-item><el-form-item label="授课班级：" :prop="'addList.' + index + '.banji'" :rules="{required: true, message: '授课班级不能为空', trigger: 'change'}"><div flex="cross:center"><el-select v-model="item.banji" filterable placeholder="请选择"@change="changeClass(item.banji, item.yuanxi, index)"><el-option :label="bj.class_title" :value="bj.id"v-for="(bj, indexbj) in item.classesList" :key="indexbj"></el-option></el-select></div></el-form-item><span style="margin-top:5px; "><i class="el-icon-remove-outline" style="color: #264E71;" @click="removeOne(index)"v-show="form.addList.length > 1"></i><i class="el-icon-circle-plus-outline" style="color: #264E71;" @click="plusOne(index)"></i></span></div></el-form></div><span slot="footer" class="dialog-footer"><el-button class="dioSave btnOk dioBigSave" type="primary" @click="AddOrder('form')">提交</el-button><el-button class="dioSave btnCancel dioBigSave" @click="resetForm1" v-if="flag == 0">重置</el-button><el-button class="dioSave btnCancel dioBigSave" @click="resetForm1" v-if="flag == 1">重置</el-button></span></el-dialog>

<script>
import {addTeacher,updateTeacher,departmentDepartmentList,departmentClassesList
} from '@/api/api';
export default {components: {},data() {return {form: {addList: [{yuanxi: "",banji: '',classesList: []}],},departmentList: [],centerDialogVisible: false,};},props: {title: {type: String},flag: {type: Number}},computed: {},watch: {},methods: {changeClass(banji, yuanxi, index) {console.log(banji, '---banji');console.log(yuanxi, 'yuanxi');},AddOrder(form) {this.$refs[form].validate((valid) => {if (valid) {if (this.flag == 1) {this.updatesubmit()} else {this.submit()}} else {console.log('error submit!!');return false;}});},xunhuan() {},submit() {let department = []let classes = []this.form.addList = Array.from(new Set(this.form.addList.map(JSON.stringify))).map(JSON.parse);console.log(this.form.addList, 'addList');this.form.addList.forEach((item) => {department.push(item.yuanxi)classes.push(item.banji)})let params = {token: this.$store.state.Authorization,code: this.form.code,name: this.form.name,department: String(department),classes: String(classes),account: JSON.parse(localStorage.getItem('loginInfo')).account};addTeacher(params).then((res) => {let { data, code } = res;if (code == 200) {this.$message.success('新增成功！')this.form.code = ''this.form.name = ''this.form.addList = [{yuanxi: "",banji: '',classesList: []}]// this.$refs['form'].resetFields();// this.resetForm()this.centerDialogVisible = falsethis.$emit('addNewSuccess', true)}});},updatesubmit() {let department = []let classes = []this.form.addList = Array.from(new Set(this.form.addList.map(JSON.stringify))).map(JSON.parse);this.form.addList.forEach((item) => {department.push(item.yuanxi)classes.push(item.banji)})let params = {token: this.$store.state.Authorization,code: this.form.code,name: this.form.name,department: String(department),classes: String(classes),account: JSON.parse(localStorage.getItem('loginInfo')).account,uid: this.editId};updateTeacher(params).then((res) => {let { data, code } = res;if (code == 200) {this.$message.success('编辑成功！')this.form.code = ''this.form.name = ''this.form.addList = [{yuanxi: "",banji: '',classesList: []}]this.centerDialogVisible = falsethis.$emit('addNewSuccess', true)}});},closeDio() {console.log('执行');this.resetForm1()},resetForm0() {this.$refs['form'].resetFields();// this.form = {}// this.departmentList = []this.form.code = ''this.form.name = ''this.form.addList = [{yuanxi: "",banji: '',classesList: []}]},resetForm1() {this.form = {addList: [{yuanxi: "",banji: '',classesList: []}]}},showDio1() {this.centerDialogVisible = truethis.department()},showDio(row) {this.centerDialogVisible = true// if (row) {console.log(row.id, 'row')this.editId = row.id// this.form.code = row.code// this.form.name = row.nameif (row.clas) {let arrClasses = (row.classes).split(',')console.log(row.clas, 'clas');let arrdepartment = []row.clas.forEach((ele, i) => {arrdepartment.push(ele.department_id)})let addList = []for (let i = 0; i < arrClasses.length; i++) {addList.push({yuanxi: '',banji: Number(arrClasses[i]),classesList: []})}for (let j = 0; j < arrdepartment.length; j++) {addList[j].yuanxi = Number(arrdepartment[j])}this.department()// this.form.addList = addListthis.form = {code: row.code,name: row.name,addList: addList}console.log(addList);arrClasses.forEach((item, index) => {this.classes(index)})} else {this.form = {code: row.code,name: row.name,addList: [{yuanxi: "",banji: '',classesList: []}]}}},removeOne(index) {this.form.addList.splice(index, 1)},plusOne() {this.form.addList.push({yuanxi: "",// departmentList: [],banji: '',classesList: []})},// 院系department() {let params = {token: this.$store.state.Authorization,limit: 1000};departmentDepartmentList(params).then((res) => {let { data, code } = res;if (code == 200) {this.departmentList = data.list}});},chooseClass(index) {this.form.addList[index].classesList = []this.form.addList[index].banji = ''this.classes(index)},classes(index) {let params = {token: this.$store.state.Authorization,limit: 1000,department: this.form.addList[index].yuanxi};departmentClassesList(params).then((res) => {let { data, code } = res;if (code == 200) {this.form.addList[index].classesList = data.list}});},},created() {},mounted() {},beforeCreate() { },beforeMount() { },beforeUpdate() { },updated() { },beforeDestroy() { },destroyed() { },activated() { },
}
</script>