案例?
<template><el-form :model="form" ref="form" label-width="70px"><el-form-item><el-button icon="el-icon-plus" type="primary" plain @click="add">新增</el-button><el-button @click="resetForm('form')">重置</el-button></el-form-item><el-row :gutter="20" v-for="(user, index) in form.userList"><el-col :span="6"><el-form-item label="用戶":prop="'userList.' + index + '.userId'":rules="[{required: true, message: '用戶不能為空', trigger: ['blur','change']},{ validator: validUser, trigger: ['blur','change'] }]"><el-select v-model="user.userId"placeholder="請選擇用戶"><el-option v-for="(item,index) in uList":label="item.userName" :value="item.userId" :key="item.userId"></el-option></el-select></el-form-item></el-col><el-col :span="16"><el-form-item label="職能":prop="'userList.' + index + '.roleId'":rules="{required: true, message: '職能不能為空', trigger: ['blur','change']}"><el-selectv-model="user.roleId"multipleplaceholder="請選擇職能"><el-optionv-for="dict in dict.type.zhineng_dict":key="dict.value":label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="2" v-if="index !==0"><el-button type="danger" icon="el-icon-delete" plain @click.prevent="handleDelete(user)"></el-button></el-col></el-row></el-form>
</template><script>export default {name: "",dicts: ['zhineng_dict'],data(){return {// 表單form: {userList: []},// 人員列表uList: [],}},mounted() {this.getuList()this.setDefault()},methods: {validUser(rule, value, callback){let userArr = [];this.form.userList.forEach(item => {userArr.push(item.userId)})if (userArr.length !== [...new Set(userArr)].length) {callback(new Error('用戶不可以重復'));}else {callback();}},/* 設置默認 */setDefault() {this.form.userList.push({userId: '',roleId: [],key: Date.now()})},/* 刪除 */handleDelete(user) {var index = this.form.userList.indexOf(user)if (index !== -1) {this.form.userList.splice(index, 1)}},getuList(){this.uList= response.data;},resetForm(formName) {this.$refs[formName].resetFields();},/* 新增 */add(){this.form.userList.push({userId: '',roleId: [],key: Date.now()});}}
}
</script>
注意
1、select為多選時,默認值需設置為[],否則未填值前就會報校驗錯誤
2、表單必須為object,不能用[ ],會報錯
??