根据下标进行滚动

 非常简陋的写了一串代码，在线编译了测试下，能用，哈哈哈哈哈

<template>
  <div>
    <Input v-model="baseInfoscurrent" placeholder="Enter something..."  />
    <Button @click="getallposition">
      点击
    </Button>
  </div>
    <div class="person-scroll" ref="scrollwidth">
      <div style="white-space: nowrap;display:inline-block;transition: transform 500ms ease 0s;" :style="'transform:translateX('+onleft+');'" ref="scrollitem">
        <span  v-for="(form,index) in baseInfos" ref="scrollpreson" :key="index" style="display: inline-block;margin: 0 30px;cursor:pointer;" >
          <Icon class="ivu-icon" style="height:10px;width:10px;margin-right:5px;border-radius:50%;background-color:#2491FC;vertical-align: middle;" :style="index == baseInfoscurrent?'background-color:#2491FC;':'background-color:#ccc;'"></Icon>
          <span :style="index == baseInfoscurrent?'font-weight: bolder;vertical-align: middle;':'font-weight:normal '">{{form}}</span>
        </span>
      </div>
  </div>
</template>
<script>
    export default {
         name:"permission_89",
        components: {
        },
        watch:{
        },
        data () {
            return {
              onleft:'-110px',
              baseInfoscurrent:0,
              baseInfos:['11111111','22222222','3333333','44444','55555','6666','7777','8888']
            }
        },
      methods:{
        getallposition(){
          let _this = this;
          let allitem = _this.$refs.scrollpreson;
           let getleft = 0;
          allitem.map((item,index)=>{
            if(index == _this.baseInfoscurrent){
                    getleft = item.offsetLeft;
               }
          })
          let leftwidth = parseInt(_this.onleft);
          let inWidth = this.$refs.scrollitem.offsetWidth;
          let outWidth = this.$refs.scrollwidth.offsetWidth;//短
          if(getleft<=inWidth-outWidth){
            _this.onleft = '-'+getleft+"px";
          }else{
            console.log(2222);
            let moveleft = inWidth-outWidth;
            _this.onleft = '-'+moveleft+'px';
          }
          
          console.log(inWidth,'inWidth');
          console.log(outWidth,'outWidth');
          
          console.log(getleft,'allitem');
        }
      },
      mounted: function () {
        let _this = this;
        _this.getallposition()
      }
    }
</script>
<style>
    .person-scroll {
        overflow: hidden;
        width: 80%;
        margin: 0 auto;
    }
</style>