根据系统选角色 => 给选中重复角色id的选项，添加验证错误提示。
一、效果图
三、上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
.el-form {
width: 500px;
margin: 20px auto 0;
}
.wrap {
display: flex;
}
.wrap .el-form-item{
margin-right: 8px;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="roleForm" ref="roleForm">
<el-alert
title="根据系统选角色 => 给选中重复角色id的选项，添加验证错误提示。"
type="error"
:closable="false">
</el-alert>
<br>
<div class="wrap" v-for="(item, index) in roleForm.list" :key="index">
<el-form-item :prop="'list.' + index + '.sysNo'" :rules="{
required: true, message: '系统不能为空！', trigger: 'change'
}">
<el-select v-model="item.sysNo" placeholder="请选择系统" @change="(val)=> toChange(val, item)">
<el-option v-for="dict in item.system" :key="dict.sysNo" :label="dict.sysName" :value="dict.sysNo">
</el-option>
</el-select>
</el-form-item>
<el-form-item :prop="'list.' + index + '.roleId'" :rules="{
trigger: ['change', 'blur'],
validator: validateKey
}">
<el-select v-model="item.roleId" placeholder="请选择角色" @change="roleChange(index)">
<el-option v-for="dict in item.roles" :key="dict.roleId" :label="dict.roleName" :value="dict.roleId"
:disabled="dict.disabled">
</el-option>
</el-select>
</el-form-item>
<div>
<el-button @click.prevent="delItem(item)">删除</el-button>
</div>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('roleForm')">提交</el-button>
<el-button @click="addItem">新增一项</el-button>
<el-button @click="resetForm('roleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
roleData: [
{
sysName: '档案管理系统',
sysNo: 'ms1001',
value: '',
roles: [
{ roleName: '管理员', roleId: 'role1001' },
{ roleName: '测试人员', roleId: 'role1002' },
{ roleName: '财务人员', roleId: 'role1003' },
{ roleName: '市场人员', roleId: 'role1004' },
]
},
{
sysName: '贷后管理系统',
sysNo: 'ms2001',
value: '',
roles: [
{ roleName: '管理员22', roleId: 'role2001' },
{ roleName: '测试人员22', roleId: 'role2002' },
{ roleName: '财务人员22', roleId: 'role2003' },
{ roleName: '市场人员22', roleId: 'role2004' },
]
},
{
sysName: '催收管理系统',
sysNo: 'ms3001',
value: '',
roles: [
{ roleName: '管理员33', roleId: 'role3001' },
{ roleName: '测试人员33', roleId: 'role3002' },
{ roleName: '财务人员33', roleId: 'role3003' },
{ roleName: '市场人员33', roleId: 'role3004' },
{ roleName: '开发人员33', roleId: 'role3005' },
]
},
],
roleForm: {
list: [],
},
repeatRoleIds: [], // 重复的roleId
}
},
mounted() {
this.addItem();
},
methods: {
submitForm(formName) {
// 校验时 repeatRoleIds 要存重复的roleId
this.repeatRoleIds = this.getRepeatRoleIds();
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.roleForm.list)
// alert('submit!');
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 删除一项
delItem(item) {
var index = this.roleForm.list.indexOf(item)
if (index !== -1) {
this.roleForm.list.splice(index, 1)
this.$nextTick(() => {
this.clearItemValidate();
})
}
},
// 新增一项
addItem() {
this.roleForm.list.push(
{
sysNo: this.roleData[0].sysNo,
system: JSON.parse(JSON.stringify(this.roleData)),
roleId: '',
roles: JSON.parse(JSON.stringify(this.roleData[0].roles)),
},
);
},
// 选择系统下拉框，选中值发生变化时触发
toChange(sysNo, item) {
item.roleId = '';
for (let i = 0; i < this.roleData.length; i++) {
if (sysNo == this.roleData[i].sysNo) {
item.roles = JSON.parse(JSON.stringify(this.roleData[i].roles))
return false
}
}
},
// 选择角色下拉框，选中值发生变化时触发
roleChange(i) {
// change 时，找到非当前下拉框的其他roleId，用于校验。
this.repeatRoleIds = this.roleForm.list.filter((item, index) => index !== i).map(item => item.roleId)
// 下拉框 切换 选中值时触发 => 清除验证
this.clearItemValidate();
},
// 获取重复的roleId
getRepeatRoleIds() {
const allRoleIdList = this.roleForm.list.map(item => item.roleId)
const noRepeat = []
const repeat = []
allRoleIdList.forEach(item => {
noRepeat.includes(item) ? repeat.push(item) : noRepeat.push(item)
})
return repeat
},
// 清除验证
clearItemValidate() {
this.repeatRoleIds = this.getRepeatRoleIds();
this.$refs['roleForm'].fields.map(i => {
// 选中值并且没有重复的，清除验证
if (i.fieldValue != '' && !this.repeatRoleIds.includes(i.fieldValue)) {
i.clearValidate()
}
})
},
// rules 验证规则
validateKey(rule, value, callback) {
if (value === '') {
callback(new Error('角色不能为空！'))
} else if (this.repeatRoleIds.includes(value)) {
callback(new Error('不能选择重复的角色！'))
} else {
callback()
}
},
}
})
</script>
</html>
微信公众号【前端学馆】程序员IT编程书籍分享！
