vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置

demo的效果如下

核心代码如下
第一种方式如果是vue中路由采用hash方式，跳转会有问题（会报404），可以往下看第二种方式

<template>
  <div class="hello" >
    <!-- <h1>{{ msg }}</h1> -->
    <div class="parent">
      <div class="list" v-for="(item,index) in list1" :key="index" >
         <!-- {{item.tag}} -->
        <a class="list-item" v-for="(item2,index2) in item.data" :key="index2" :name="item.tag" >
          {{item2.Fsinger_name}}
        </a>
      </div>
      <div class="right">
        <a class="righta" :href="'#'+item1" v-for="(item1,index) in listforgirht" :key="index">{{item1}}</a>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '市场洞察-品牌',
      items: ['阿迪达斯', '耐克', '彪马', '新百伦', '李宁', '安踏', '鸿星尔克'],
      list1: [
        {
          tag: `A`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `奥巴里`
            },
            {
              Fsinger_name: `阿依莲`
            },
            {
              Fsinger_name: `A_LIN`
            },
            {
              Fsinger_name: `ANU`
            },
            {
              Fsinger_name: `AVIVA`
            }
          ]
        },
        {
          tag: `B`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `BIGBANG`
            },
            {
              Fsinger_name: `BY2`
            },
            {
              Fsinger_name: `BEYOUBD`
            },
            {
              Fsinger_name: `BTS`
            },
            {
              Fsinger_name: `BLUE`
            }
          ]
        },
        {
          tag: `C`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `蔡依林`
            }, {
              Fsinger_name: `CG`
            },
            {
              Fsinger_name: `CHEN`
            },
            {
              Fsinger_name: `CZRtoon`
            },
            {
              Fsinger_name: `Chatli`
            }
          ]
        },
        {
          tag: `D`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `邓紫棋`
            }, {
              Fsinger_name: `DJsanmek`
            },
            {
              Fsinger_name: `邓丽君`
            },
            {
              Fsinger_name: `Danko`
            },
            {
              Fsinger_name: `Deepchill`
            }
          ]
        },
        {
          tag: `E`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `饿了么`
            }, {
              Fsinger_name: `EXO`
            },
            {
              Fsinger_name: `Eric`
            },
            {
              Fsinger_name: `二手玫瑰乐队`
            },
            {
              Fsinger_name: `二哈乐队`
            }
          ]
        },
        {
          tag: `F`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `冯绍峰`
            }, {
              Fsinger_name: `F4`
            },
            {
              Fsinger_name: `冯提莫`
            },
            {
              Fsinger_name: `冯艺术`
            }, {
              Fsinger_name: `方大同`
            }
          ]
        },
        {
          tag: `G`,
          data: [
            {
              img: `https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558361071&di=0a522afe68fc7e2aa3af34cb5cd8c96a&imgtype=jpg&er=1&src=http%3A%2F%2Fwerkstette.dk%2Fwp-content%2Fuploads%2F2015%2F09%2FEntertainment_Weekly_Photographer_Marc_Hom_British_Actor_Charlie_Hunnam_as_King_Arthur_Retouch_Werkstette10-770x841.jpg`,
              Fsinger_name: `G.E.M`
            }, {
              Fsinger_name: `GALA`
            },
            {
              Fsinger_name: `G-dragon`
            },
            {
              Fsinger_name: `GAI周岩`
            }, {
              Fsinger_name: `光良`
            }
          ]
        }
      ],
      list: ['a', 'b', 'c', 'd', 'e', 'f'],
      listforgirht: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

a {
  /* color: #42b983; */
}
.list{
  width: 456px;
  background: #42b983;
  margin-bottom: 20px;

}
.hello{
  position: relative;

}
.parent{
  width: 553px;
  height: 681px;
  top: 300px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: auto;
  position: absolute;

}
.right{
  width: 14px;
  height: 572px;
  position: absolute;
  right: 30px;
  top: 83px;

}
.righta{
  display: block;
  padding: 2px;

}
</style>

里面比较巧妙的就是通过锚点实现定位到具体的位置
还有第二种实现方式：比较通用的，当点击右侧A-Z的字母的时候，传id到点击事件，然后循环的时候设置组建的id为A-Z，做到一一对应，通过：

<div v-if="item.openDialog" id="box2" class="parent">
                <div class="top-title">{{ item.name +'-' +item.permissionRespDtoList[1].tag }}</div>
                //绑定相应的id
                <div v-for="(itembrand,index1) in item.permissionRespDtoList[1].nameDtoList" :id="itembrand.initial" :key="index1" class="list">
                  <a v-for="(item2,index2) in itembrand.nameList" :key="index2" class="list-item">
                    {{ item2 }}
                  </a>
                </div>
                <div class="right">
                  <div v-for="(item1,index3) in listforgirht" :key="index3" class="righta" @click="scrolltoinsdent(item1)">{{ item1 }}</div>

                </div>
              </div>
            先得到点击对应元素距离父元素的距离，  通过scrolltop移动相应的距离来实现
 scrolltoinsdent (item) {
      var aa = document.getElementById(item).offsetTop
      var box2 = document.getElementById('box2')

      box2.scrollTop = aa
    }