移动端vue项目中前端对后台返回的数据按A-Z进行分类

结合vant的索引栏组件
需求：能够如图片（截图官方文档的）这样显示。并且由前端对返回的数据进行处理，按A-Z分类，并且对应字母的数据如果为空，则不显示字母，例如：I开头的数据为空，则不显示I索引栏

template模板中：

<div class="indexBar">
      <van-index-bar>
        <div v-for="(item, index) in classificationLettersList" :key="index">
          <!-- 索引栏 -->
          <van-index-anchor :index="item.letter" />
          <van-cell
            v-for="(subItem, subIndex) in item.content"
            :key="subIndex"
            :class="subIndex!== subItem.length -1  ? ['border'] : ''"
          >
          	 <!-- 文本内容 -->
            <van-row>
              <van-col span="6">{{ subItem.name }}</van-col>
              <van-col span="18">{{ subItem.title}}</van-col>
            </van-row>
          </van-cell>
        </div>
	</van-index-bar>
</div>

<script>
export default {
  data() {
    return {
      alphabet: ["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"],
      list:[
		{name:"aaaa",title:"111"},	
		{name:"abba",title:"1221"},
		{name:"eeee",title:"111"}
		{name:"accca",title:"131"},
		{name:"eagg",title:"15551"}
		{name:"baaa",title:"1661"},
		{name:"bafff",title:"161"},
		{name:"caaa",title:"15555"},
		{name:"faaa",title:"22211"},
		{name:"gaaa",title:"9911"},
		{name:"dddaa",title:"33011"},
		{name:"ccttaa",title:"2662211"},
		{name:"gwwaa",title:"9911"},
		{name:"fvvaa",title:"10011"},
	  ],
      classificationLettersList: [],
    };
  },
  mounted() {
      this.getClassificationLettersList();
  },
  methods: {
    getClassificationLettersList() {
      const arr = {};
      this.alphabet.forEach((letterItem) => {
        arr.letter = letterItem;
        arr.content = this.list.filter((item) => {
          return item.name[0].toUpperCase() === letterItem;
        });
        if (arr.content.length !== 0) {
          this.classificationLettersList.push(JSON.parse(JSON.stringify(arr)));
        }
      });
    },
  },
};
</script>

*=========== 如果I开头的数据为空，也可以显示I索引栏的话 ========*
PS:不过对应数据为空还显示字母的话页面会有些丑~~
下面这个写法更简洁，可以参考下：

<div class="indexBar">
      <van-index-bar>
        <div v-for="(letterItem, letterIndex) in alphabet" :key="letterIndex">
          <!-- 索引栏 -->
          <van-index-anchor :index="letterItem" />
          <van-cell
            v-for="(item, index) in list.filter((item) => item.name[0].toUpperCase() === letterItem)"
            :key="index"
            :class="index !== item.length -1  ? ['border'] : ''"
          >
          	 <!-- 文本内容 -->
            <van-row>
              <van-col span="6">{{ item.name }}</van-col>
              <van-col span="18">{{ item.title}}</van-col>
            </van-row>
          </van-cell>
        </div>
	</van-index-bar>
</div>

<script>
export default {
  data() {
    return {
      alphabet: ["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"],
      list:[
		{name:"aaaa",title:"111"},	
		{name:"abba",title:"1221"},
		{name:"eeee",title:"111"}
		{name:"accca",title:"131"},
		{name:"eagg",title:"15551"}
		{name:"baaa",title:"1661"},
		{name:"bafff",title:"161"},
		{name:"caaa",title:"15555"},
		{name:"faaa",title:"22211"},
		{name:"gaaa",title:"9911"},
		{name:"dddaa",title:"33011"},
		{name:"ccttaa",title:"2662211"},
		{name:"gwwaa",title:"9911"},
		{name:"fvvaa",title:"10011"},
	  ]
    }
  }
};
</script>