需求
页面上有很多的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-icon
v-if="item.type != 3"
type="close-circle"
style="color: #f81d22; cursor: pointer; margin-top: 4px"
@click.native="deletePosition(item)"
/>
<a-icon
v-else
type="redo"
style="cursor: pointer; margin-top: 4px; color: #40a9ff"
@click.native="recovery(item, index)"
/>
</a-checkable-tag>
</div>
</div>
// js
//新增tag
addPosition() {
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' + index
this.$nextTick(() => {
//根据实际调整滚动位置
this.$refs.tagList.scrollTop = this.$refs[tagRef][0].offsetTop - 141
})
this.$message.warning('职位已存在')
}
}
})
},