需求

页面上有很多的tag，当新增的tag重复了，滚动条需要自动滚动到该重复的tag的位置

代码

// html<div class="tagList" ref="tagList"><div v-for="(item, index) in positionList" :ref="'tag' + index" :key="index" style="display: inline-block"><a-checkable-tag:checked="selectedTags == item.id"@change="(checked) => handleChange(item, checked)"style="cursor: pointer;height: 30px;line-height: 28px;box-sizing: border-box;color: rgba(0, 0, 0, 0.65);position: relative;":class="{ isDel: item.type == 3 }">{{ item.positionName }}<span v-if="item.type == 3">(已删)</span>（<span style="color: #f81d22">{{item.positionNum ? item.positionNum : 0}}</span>）<a-iconv-if="item.type != 3"type="close-circle"style="color: #f81d22; cursor: pointer; margin-top: 4px"@click.native="deletePosition(item)"/><a-iconv-elsetype="redo"style="cursor: pointer; margin-top: 4px; color: #40a9ff"@click.native="recovery(item, index)"/></a-checkable-tag></div></div>

// js//新增tagaddPosition() {this.$refs.form.validate((value) => {if (value) {if(this.positionList.length == 100) {this.$message.warning('最多支持 100 个职位')return }let repeatObj = this.positionList.filter((item) => {return item.positionName == this.form.addName})let index = this.positionList.findIndex((item) => {return item.positionName == this.form.addName})if (repeatObj.length == 0) {let companyInfo = Vue.ls.get(DEFAULT_COMPANY)this.positionList.push({type: 1, //1新增职位 2修改职位 3删除职位positionName: this.form.addName,enterpriseCode: companyInfo.enterpriseCode,permissionList: this.allTreeKeys,id: randomUUID16(),positionNum: 0,})this.form.addName = ''} else {//重复名称if (repeatObj[0].type == 3) {//已删除} else {this.handleChange(repeatObj[0])}//滚动条滚动到指定位置let tagRef = 'tag' + indexthis.$nextTick(() => {//根据实际调整滚动位置this.$refs.tagList.scrollTop = this.$refs[tagRef][0].offsetTop - 141})this.$message.warning('职位已存在')}}})},