微信截图_20210902104824.png
现在有这样一个需求，动态添加手机号，并对其进行重复的校验。
先整理一下我的思路：
微信图片_20210902105014.jpg
来画重点：（取消聚焦的时候校验）
①每个手机号要有对应一个唯一的标识（我这里给它定义了id-这是我自动随机产生的）---这个很重要，千万不要用index（因为做删除的时候，这个就会有问题了）
②根据唯一的id来判断是否存在。
为什么要判断id而不是判断手机号(num)？
例子：你对某项进行了操作，该手机号不重复所以可以输入，这步是没有问题了。但是如果你想对当前项进行操作，比如你删掉数字了，再重新将之前的号码输入进去，你就会发现有问题了。它会告诉你之前已经输入过了。
接下来上主要的代码：
// 校验重复
private phoneNumberBlur(val: any, index: number) {
if (this.$getNameByNumId(this.phoneNumList, this.phoneNumListIdList[index].id)) {
if(val) {
if (val===this.$getNameByNum(this.phoneNumList, this.phoneNumListIdList[index].id)) {
return
} else {
if (this.$getNameByNumBer(this.phoneNumList, val)) {
Dialog.confirm({
title: '提示',
message: '您已经添加过该手机号了，请忽重复添加！',
showCancelButton: false
}).then(() => {
Vue.set(this.dataList[index], "moblideID", "")
})
} else {
this.phoneNumList.forEach((item: any, indexChild: number) => {
if (item.id===this.phoneNumListIdList[index].id) {
this.phoneNumList[indexChild].num = val
}
})
}
}
} else {
this.phoneNumList.forEach((item: any, indexChild: number) => {
if (item.id===this.phoneNumListIdList[index].id) {
this.phoneNumList[indexChild].num = val
}
})
}
} else {
if (val) {
if (this.$getNameByNumBer(this.phoneNumList, val)) {
Dialog.confirm({
title: '提示',
message: '您已经添加过该手机号了，请忽重复添加！',
showCancelButton: false
}).then(() => {
Vue.set(this.dataList[index], "moblideID", "")
})
} else {
const abj = {
id :this.phoneNumListIdList[index].id,
num: val
}
this.phoneNumList.push(abj)
}
}
}
}
就是这样啦~ 都包含全了~~~写得不好，但思路就是这样哈
