@blur检验数组重复并对重复项加后缀

最新推荐文章于 2025-03-17 21:16:14 发布

喝咖啡还是泡茶

最新推荐文章于 2025-03-17 21:16:14 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

分类专栏： elementui js

本文链接：https://blog.youkuaiyun.com/weixin_44328764/article/details/116711917

elementui 同时被 2 个专栏收录

16 篇文章

订阅专栏

14 篇文章

订阅专栏

本文介绍了如何在input失去焦点(@blur)时，通过JavaScript校验表格中输入的数组值是否重复。当检测到重复值时，会自动为重复项添加'01', '02', '03'等后缀，以确保数组内的唯一性。" 46925161,1202846,Unity中Shader的使用与自定义教程,"['Unity3D', '图形渲染', '游戏开发', '3D建模', '编程']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@blur校验数组重复

使用场景
table嵌套input
input失去焦点时判断输入的所有值是否有重复项，并对重复项增加01，02，03的后缀
实现效果
在这里插入图片描述

JS部分

        data(){
        	return {
        		repeatTime:new Map([]) //记录每一项的重复次数
        	}
        }
        repeatZhName() {
            // 重复字段的中文名后加_01
            for (let i = 0; i < this.fieldInfoList.length - 1; i++) {
                for (let j = i + 1; j < this.fieldInfoList.length; j++) {
                    if (this.fieldInfoList[i].cnName != '' && this.fieldInfoList[j].cnName != '') {
                        if (this.fieldInfoList[i].cnName === this.fieldInfoList[j].cnName) {
                            // return this.$message.warning('字段中文名存在重复')
                            if (this.repeatTime.get(this.fieldInfoList[j].cnName) !== undefined) {
                                let num = this.repeatTime.get(this.fieldInfoList[j].cnName)
                                this.repeatTime.set(this.fieldInfoList[i].cnName, ++num)
                            } else {
                                this.repeatTime.set(this.fieldInfoList[i].cnName, 1)
                            }
                            let num = this.repeatTime.get(this.fieldInfoList[i].cnName)
                            num = num > 9 ? num : '0' + num
                            this.fieldInfoList[j].cnName = this.fieldInfoList[j].cnName + '_' + num
                        }
                    }
                }
            }
        }

HTML

<el-input
                        v-model="record.cnName"
                        :class="['text-input', { normal: pageType == 'check' }]"
                        placeholder="请输入"
                        :title="record.cnName"
                        :readonly="pageType == 'check'"
                        @blur="repeatZhName"
                    ></el-input>