vue2+ant-design-vue a-tag滚动条滚动到指定位置

需求

页面上有很多的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('职位已存在')
          }
        }
      })
    },

猜你喜欢

转载自blog.csdn.net/zhongxiajiu/article/details/132688324
今日推荐